@font-face {
    font-family: consolas_;
    src: url(/static/font/consolas.eot);
    src: url(/static/font/consolas.eot#iefix) format('embedded-opentype'),url(/static/font/consolas.woff) format('woff'),url(/static/font/consolas.ttf) format('truetype'),url(/static/font/consolas.svg) format('svg')
}

.wux-theme-dark {
    background-color: #323232
}

:root {
    --global-animation-speed: 0.2s
}

body {
    font-family: Inter,"Noto Sans SC","Sans Serif",Arial;
    font-weight: 400;
    line-height: 1.4;
    font-size: 16px
}

body {
    background-color: #fcfcfc
}

body[dark-mode] {
    background-color: #121212;
    color: #fcfcfc
}

*,:after,:before {
    -webkit-tap-highlight-color: transparent
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace,monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none!important
}

.wux-typo {
    line-height: 1.8;
    word-wrap: break-word
}

.wux-typo footer {
    font-size: 12px;
    margin-top: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center
}

.wux-typo address,.wux-typo caption,.wux-typo cite,.wux-typo code,.wux-typo dfn,.wux-typo th {
    font-weight: 400;
    font-style: normal
}

.wux-typo caption,.wux-typo th {
    text-align: left
}

.wux-typo q::after,.wux-typo q::before {
    content: ""
}

.wux-typo code,.wux-typo kbd,.wux-typo pre,.wux-typo pre tt,.wux-typo samp {
    font-family: consolas_,"Fira Code",Consola,JetBrainsMono,"Roboto Mono","Ubuntu Mono",Monospace,Courier
}

.wux-typo figcaption {
    color: #bbb;
    font-size: 80%
}

.wux-typo [draggable=true],.wux-typo [draggable] {
    cursor: move
}

.wux-typo [draggable=false] {
    cursor: inherit
}

.wux-typo dl,.wux-typo figure,.wux-typo form,.wux-typo hr,.wux-typo ol,.wux-typo p,.wux-typo pre,.wux-typo table,.wux-typo ul {
    margin: 0 0 1.2em 0
}

.wux-typo dl:last-child,.wux-typo figure:last-child,.wux-typo form:last-child,.wux-typo hr:last-child,.wux-typo ol:last-child,.wux-typo p:last-child,.wux-typo pre:last-child,.wux-typo table:last-child,.wux-typo ul:last-child {
    margin-bottom: 0
}

.wux-typo a:not(.wux-btn) {
    color: #00ffd0;
    text-decoration: none;
    transition: 0.2s
}

.wux-typo a:not(.wux-btn):hover {
    color: #20285d;
    //text-decoration: underline;
}

.wux-typo small {
    font-size: 80%
}

.wux-typo mark {
    background: rgba(0,0,0,0);
    position: relative;
    margin: 2px 4px;
    color: #464646
}

.wux-typo mark:after {
    content: "";
    z-index: -1;
    position: absolute;
    background-color: #fffdd1;
    top: -2px;
    bottom: -2px;
    left: -4px;
    right: -4px;
    border-radius: 4px
}

.wux-typo h1,.wux-typo h2,.wux-typo h3,.wux-typo h4,.wux-typo h5,.wux-typo h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    color: inherit;
    font-family: inherit;
    line-height: 1.6
}

.wux-typo h1:last-child,.wux-typo h2:last-child,.wux-typo h3:last-child,.wux-typo h4:last-child,.wux-typo h5:last-child,.wux-typo h6:last-child {
    margin-bottom: 0
}

.wux-typo h1 {
    font-size: 32px;
    font-weight: 700
}

.wux-typo h2 {
    font-size: 28px;
    font-weight: 700
}

.wux-typo h3 {
    font-size: 24px;
    font-weight: 700
}

.wux-typo h4 {
    font-size: 22px;
    font-weight: 400
}

.wux-typo h5 {
    font-size: 20px;
    font-weight: 400
}

.wux-typo h6 {
    font-size: 18px;
    font-weight: 400
}

.wux-typo code {
    padding: 2px 6px;
    color: #c7254e;
    border-radius: 6px
}

.wux-typo pre code {
    margin: 2px;
    padding: 0!important;
    color: inherit;
    font-size: inherit;
    line-height: 1.6;
    background-color: rgba(0,0,0,0);
    border-radius: 0
}

.wux-typo abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted;
    cursor: help
}

.wux-typo ins {
    text-decoration: none;
    border-bottom: 1px solid
}

.wux-typo u {
    text-decoration: none;
    position: relative
}

.wux-typo u:after {
    content: "";
    z-index: -1;
    position: absolute;
    background-color: #aaa;
    top: 85%;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 4px
}

.wux-typo del {
    text-decoration: line-through
}

.wux-typo hr {
    height: 10px;
    margin-bottom: .8em;
    border: none;
    border-bottom: 1px solid #ccc
}

.wux-typo pre {
    padding: 8px 12px;
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    border: 2px solid #ccc;
    border-radius: 12px;
    -webkit-overflow-scrolling: touch
}

.wux-typo kbd {
    padding: 4px 8px;
    color: #fff;
    font-size: 90%;
    background-color: #333;
    border-radius: 6px
}

.wux-typo ul {
    padding-left: 2em;
    list-style: disc
}

.wux-typo ol {
    padding-left: 2em;
    list-style: decimal
}

.wux-typo li ol,.wux-typo li ul {
    margin: 0
}

.wux-typo li ul {
    list-style: circle
}

.wux-typo img,.wux-typo video {
    max-width: 100%
}

.wux-typo figure {
    text-align: center
}

.wux-typo figure figcaption {
    margin-top: 8px;
    color: #999;
    font-size: 14px
}

.wux-typo figure figcaption:empty::before {
    z-index: -1;
    color: #bfbfbf;
    cursor: text;
    content: attr(placeholder)
}

.wux-typo blockquote {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='40px'><text x='-25' y='45' fill='rgb(200, 200, 200)' font-size='50' stroke-width='2px' stroke='rgb(200, 200, 200)'>%E2%80%9C</text></svg>");
    background-repeat: no-repeat;
    background-position: left 2px top;
    margin: 0;
    padding-inline-start:35px}

.wux-container {
    box-sizing: border-box;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 6px;
    padding: 0 10px
}

.wux-container-fluid {
    margin: 2px;
    padding: 0 16px
}

.wux-container-fluid::after,.wux-container::after {
    display: table;
    clear: both;
    content: ""
}

.wux-row,[class*=wux-row-] {
    margin-right: -8px;
    margin-left: -8px
}

.wux-row::after,[class*=wux-row-]::after {
    display: table;
    clear: both;
    content: ""
}

.wux-col,[class*=wux-col-lg-],[class*=wux-col-md-],[class*=wux-col-sm-],[class*=wux-col-xl-],[class*=wux-col-xs-] {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    min-height: 1px;
    padding-right: 8px;
    padding-left: 8px;
    margin-bottom: 8px
}

@media(min-width: 0) {
    .wux-col-xs-1 {
        float:left;
        width: 8.3333333333%
    }

    .wux-row-xs-1>.wux-col {
        float: left;
        width: 100%
    }

    .wux-col-xs-2 {
        float: left;
        width: 16.6666666667%
    }

    .wux-row-xs-2>.wux-col {
        float: left;
        width: 50%
    }

    .wux-col-xs-3 {
        float: left;
        width: 25%
    }

    .wux-row-xs-3>.wux-col {
        float: left;
        width: 33.3333333333%
    }

    .wux-col-xs-4 {
        float: left;
        width: 33.3333333333%
    }

    .wux-row-xs-4>.wux-col {
        float: left;
        width: 25%
    }

    .wux-col-xs-5 {
        float: left;
        width: 41.6666666667%
    }

    .wux-row-xs-5>.wux-col {
        float: left;
        width: 20%
    }

    .wux-col-xs-6 {
        float: left;
        width: 50%
    }

    .wux-row-xs-6>.wux-col {
        float: left;
        width: 16.6666666667%
    }

    .wux-col-xs-7 {
        float: left;
        width: 58.3333333333%
    }

    .wux-row-xs-7>.wux-col {
        float: left;
        width: 14.2857142857%
    }

    .wux-col-xs-8 {
        float: left;
        width: 66.6666666667%
    }

    .wux-row-xs-8>.wux-col {
        float: left;
        width: 12.5%
    }

    .wux-col-xs-9 {
        float: left;
        width: 75%
    }

    .wux-row-xs-9>.wux-col {
        float: left;
        width: 11.1111111111%
    }

    .wux-col-xs-10 {
        float: left;
        width: 83.3333333333%
    }

    .wux-row-xs-10>.wux-col {
        float: left;
        width: 10%
    }

    .wux-col-xs-11 {
        float: left;
        width: 91.6666666667%
    }

    .wux-row-xs-11>.wux-col {
        float: left;
        width: 9.0909090909%
    }

    .wux-col-xs-12 {
        float: left;
        width: 100%
    }

    .wux-row-xs-12>.wux-col {
        float: left;
        width: 8.3333333333%
    }
}

@media(min-width: 600px) {
    .wux-col-sm-1 {
        float:left;
        width: 8.3333333333%
    }

    .wux-row-sm-1>.wux-col {
        float: left;
        width: 100%
    }

    .wux-col-sm-2 {
        float: left;
        width: 16.6666666667%
    }

    .wux-row-sm-2>.wux-col {
        float: left;
        width: 50%
    }

    .wux-col-sm-3 {
        float: left;
        width: 25%
    }

    .wux-row-sm-3>.wux-col {
        float: left;
        width: 33.3333333333%
    }

    .wux-col-sm-4 {
        float: left;
        width: 33.3333333333%
    }

    .wux-row-sm-4>.wux-col {
        float: left;
        width: 25%
    }

    .wux-col-sm-5 {
        float: left;
        width: 41.6666666667%
    }

    .wux-row-sm-5>.wux-col {
        float: left;
        width: 20%
    }

    .wux-col-sm-6 {
        float: left;
        width: 50%
    }

    .wux-row-sm-6>.wux-col {
        float: left;
        width: 16.6666666667%
    }

    .wux-col-sm-7 {
        float: left;
        width: 58.3333333333%
    }

    .wux-row-sm-7>.wux-col {
        float: left;
        width: 14.2857142857%
    }

    .wux-col-sm-8 {
        float: left;
        width: 66.6666666667%
    }

    .wux-row-sm-8>.wux-col {
        float: left;
        width: 12.5%
    }

    .wux-col-sm-9 {
        float: left;
        width: 75%
    }

    .wux-row-sm-9>.wux-col {
        float: left;
        width: 11.1111111111%
    }

    .wux-col-sm-10 {
        float: left;
        width: 83.3333333333%
    }

    .wux-row-sm-10>.wux-col {
        float: left;
        width: 10%
    }

    .wux-col-sm-11 {
        float: left;
        width: 91.6666666667%
    }

    .wux-row-sm-11>.wux-col {
        float: left;
        width: 9.0909090909%
    }

    .wux-col-sm-12 {
        float: left;
        width: 100%
    }

    .wux-row-sm-12>.wux-col {
        float: left;
        width: 8.3333333333%
    }
}

@media(min-width: 1024px) {
    .wux-col-md-1 {
        float:left;
        width: 8.3333333333%
    }

    .wux-row-md-1>.wux-col {
        float: left;
        width: 100%
    }

    .wux-col-md-2 {
        float: left;
        width: 16.6666666667%
    }

    .wux-row-md-2>.wux-col {
        float: left;
        width: 50%
    }

    .wux-col-md-3 {
        float: left;
        width: 25%
    }

    .wux-row-md-3>.wux-col {
        float: left;
        width: 33.3333333333%
    }

    .wux-col-md-4 {
        float: left;
        width: 33.3333333333%
    }

    .wux-row-md-4>.wux-col {
        float: left;
        width: 25%
    }

    .wux-col-md-5 {
        float: left;
        width: 41.6666666667%
    }

    .wux-row-md-5>.wux-col {
        float: left;
        width: 20%
    }

    .wux-col-md-6 {
        float: left;
        width: 50%
    }

    .wux-row-md-6>.wux-col {
        float: left;
        width: 16.6666666667%
    }

    .wux-col-md-7 {
        float: left;
        width: 58.3333333333%
    }

    .wux-row-md-7>.wux-col {
        float: left;
        width: 14.2857142857%
    }

    .wux-col-md-8 {
        float: left;
        width: 66.6666666667%
    }

    .wux-row-md-8>.wux-col {
        float: left;
        width: 12.5%
    }

    .wux-col-md-9 {
        float: left;
        width: 75%
    }

    .wux-row-md-9>.wux-col {
        float: left;
        width: 11.1111111111%
    }

    .wux-col-md-10 {
        float: left;
        width: 83.3333333333%
    }

    .wux-row-md-10>.wux-col {
        float: left;
        width: 10%
    }

    .wux-col-md-11 {
        float: left;
        width: 91.6666666667%
    }

    .wux-row-md-11>.wux-col {
        float: left;
        width: 9.0909090909%
    }

    .wux-col-md-12 {
        float: left;
        width: 100%
    }

    .wux-row-md-12>.wux-col {
        float: left;
        width: 8.3333333333%
    }
}

@media(min-width: 1440px) {
    .wux-col-lg-1 {
        float:left;
        width: 8.3333333333%
    }

    .wux-row-lg-1>.wux-col {
        float: left;
        width: 100%
    }

    .wux-col-lg-2 {
        float: left;
        width: 16.6666666667%
    }

    .wux-row-lg-2>.wux-col {
        float: left;
        width: 50%
    }

    .wux-col-lg-3 {
        float: left;
        width: 25%
    }

    .wux-row-lg-3>.wux-col {
        float: left;
        width: 33.3333333333%
    }

    .wux-col-lg-4 {
        float: left;
        width: 33.3333333333%
    }

    .wux-row-lg-4>.wux-col {
        float: left;
        width: 25%
    }

    .wux-col-lg-5 {
        float: left;
        width: 41.6666666667%
    }

    .wux-row-lg-5>.wux-col {
        float: left;
        width: 20%
    }

    .wux-col-lg-6 {
        float: left;
        width: 50%
    }

    .wux-row-lg-6>.wux-col {
        float: left;
        width: 16.6666666667%
    }

    .wux-col-lg-7 {
        float: left;
        width: 58.3333333333%
    }

    .wux-row-lg-7>.wux-col {
        float: left;
        width: 14.2857142857%
    }

    .wux-col-lg-8 {
        float: left;
        width: 66.6666666667%
    }

    .wux-row-lg-8>.wux-col {
        float: left;
        width: 12.5%
    }

    .wux-col-lg-9 {
        float: left;
        width: 75%
    }

    .wux-row-lg-9>.wux-col {
        float: left;
        width: 11.1111111111%
    }

    .wux-col-lg-10 {
        float: left;
        width: 83.3333333333%
    }

    .wux-row-lg-10>.wux-col {
        float: left;
        width: 10%
    }

    .wux-col-lg-11 {
        float: left;
        width: 91.6666666667%
    }

    .wux-row-lg-11>.wux-col {
        float: left;
        width: 9.0909090909%
    }

    .wux-col-lg-12 {
        float: left;
        width: 100%
    }

    .wux-row-lg-12>.wux-col {
        float: left;
        width: 8.3333333333%
    }
}

@media(min-width: 1920px) {
    .wux-col-xl-1 {
        float:left;
        width: 8.3333333333%
    }

    .wux-row-xl-1>.wux-col {
        float: left;
        width: 100%
    }

    .wux-col-xl-2 {
        float: left;
        width: 16.6666666667%
    }

    .wux-row-xl-2>.wux-col {
        float: left;
        width: 50%
    }

    .wux-col-xl-3 {
        float: left;
        width: 25%
    }

    .wux-row-xl-3>.wux-col {
        float: left;
        width: 33.3333333333%
    }

    .wux-col-xl-4 {
        float: left;
        width: 33.3333333333%
    }

    .wux-row-xl-4>.wux-col {
        float: left;
        width: 25%
    }

    .wux-col-xl-5 {
        float: left;
        width: 41.6666666667%
    }

    .wux-row-xl-5>.wux-col {
        float: left;
        width: 20%
    }

    .wux-col-xl-6 {
        float: left;
        width: 50%
    }

    .wux-row-xl-6>.wux-col {
        float: left;
        width: 16.6666666667%
    }

    .wux-col-xl-7 {
        float: left;
        width: 58.3333333333%
    }

    .wux-row-xl-7>.wux-col {
        float: left;
        width: 14.2857142857%
    }

    .wux-col-xl-8 {
        float: left;
        width: 66.6666666667%
    }

    .wux-row-xl-8>.wux-col {
        float: left;
        width: 12.5%
    }

    .wux-col-xl-9 {
        float: left;
        width: 75%
    }

    .wux-row-xl-9>.wux-col {
        float: left;
        width: 11.1111111111%
    }

    .wux-col-xl-10 {
        float: left;
        width: 83.3333333333%
    }

    .wux-row-xl-10>.wux-col {
        float: left;
        width: 10%
    }

    .wux-col-xl-11 {
        float: left;
        width: 91.6666666667%
    }

    .wux-row-xl-11>.wux-col {
        float: left;
        width: 9.0909090909%
    }

    .wux-col-xl-12 {
        float: left;
        width: 100%
    }

    .wux-row-xl-12>.wux-col {
        float: left;
        width: 8.3333333333%
    }
}

[bg-color] {
    --attr-custom-bg-color: attr(bg-color color);
    background-color: var(--attr-custom-bg-color)
}

[bg-img] {
    --attr-custom-bg-img: attr(bg-img url);
    background-image: var(--attr-custom-bg-img)
}

[border-width] {
    --attr-custom-border-width: attr(border-width px);
    border-width: var(--attr-custom-border-width)
}

[border-top-width] {
    --attr-custom-border-top-width: attr(border-top-width px);
    border-top-width: var(--attr-custom-border-top-width)
}

[border-bottom-width] {
    --attr-custom-border-bottom-width: attr(border-bottom-width px);
    border-bottom-width: var(--attr-custom-border-bottom-width)
}

[border-left-width] {
    --attr-custom-border-left-width: attr(border-left-width px);
    border-left-width: var(--attr-custom-border-left-width)
}

[border-right-width] {
    --attr-custom-border-right-width: attr(border-right-width px);
    border-right-width: var(--attr-custom-border-right-width)
}

[border-color] {
    --attr-custom-border-color: attr(border-color color);
    border-color: var(--attr-custom-border-color);
    border-style: solid
}

[border-top-color] {
    --attr-custom-border-top-color: attr(border-top-color color);
    border-top-color: var(--attr-custom-border-top-color);
    border-top-style: solid
}

[border-bottom-color] {
    --attr-custom-border-bottom-color: attr(border-bottom-color color);
    border-bottom-color: var(--attr-custom-border-bottom-color);
    border-bottom-style: solid
}

[border-left-color] {
    --attr-custom-border-left-color: attr(border-left-color color);
    border-left-color: var(--attr-custom-border-left-color);
    border-left-style: solid
}

[border-right-color] {
    --attr-custom-border-right-color: attr(border-right-color color);
    border-right-color: var(--attr-custom-border-right-color);
    border-right-style: solid
}

[border-radius] {
    --attr-custom-border-radius: attr(border-radius px);
    border-radius: var(--attr-custom-border-radius)
}

[border-top-left-radius] {
    --attr-custom-border-top-left-radius: attr(border-top-left-radius px);
    border-top-left-radius: var(--attr-custom-border-top-left-radius)
}

[border-top-right-radius] {
    --attr-custom-border-top-right-radius: attr(border-top-right-radius px);
    border-top-right-radius: var(--attr-custom-border-top-right-radius)
}

[border-bottom-left-radius] {
    --attr-custom-border-bottom-left-radius: attr(border-bottom-left-radius px);
    border-bottom-left-radius: var(--attr-custom-border-bottom-left-radius)
}

[border-bottom-right-radius] {
    --attr-custom-border-bottom-right-radius: attr(border-bottom-right-radius px);
    border-bottom-right-radius: var(--attr-custom-border-bottom-right-radius)
}

[border-style=solid] {
    border-style: solid
}

[border-style=dashed] {
    border-style: dashed
}

[border-style=dotted] {
    border-style: dotted
}

[border-style=double] {
    border-style: double
}

[border-top-style=solid] {
    border-top-style: solid
}

[border-top-style=dashed] {
    border-top-style: dashed
}

[border-top-style=dotted] {
    border-top-style: dotted
}

[border-top-style=double] {
    border-top-style: double
}

[border-bottom-style=solid] {
    border-bottom-style: solid
}

[border-bottom-style=dashed] {
    border-bottom-style: dashed
}

[border-bottom-style=dotted] {
    border-bottom-style: dotted
}

[border-bottom-style=double] {
    border-bottom-style: double
}

[border-left-style=solid] {
    border-left-style: solid
}

[border-left-style=dashed] {
    border-left-style: dashed
}

[border-left-style=dotted] {
    border-left-style: dotted
}

[border-left-style=double] {
    border-left-style: double
}

[border-right-style=solid] {
    border-right-style: solid
}

[border-right-style=dashed] {
    border-right-style: dashed
}

[border-right-style=dotted] {
    border-right-style: dotted
}

[border-right-style=double] {
    border-right-style: double
}

[float=left] {
    float: left
}

[float=right] {
    float: right
}

float-clear:after,float-clear:before {
    content: "";
    display: table;
    clear: both
}

[margin] {
    --attr-custom-margin: attr(margin px);
    margin: var(--attr-custom-margin)
}

[margin-top] {
    --attr-custom-margin-top: attr(margin-top px);
    margin-top: var(--attr-custom-margin-top)
}

[margin-bottom] {
    --attr-custom-margin-bottom: attr(margin-bottom px);
    margin-bottom: var(--attr-custom-margin-bottom)
}

[margin-left] {
    --attr-custom-margin-left: attr(margin-left px);
    margin-left: var(--attr-custom-margin-left)
}

[margin-right] {
    --attr-custom-margin-right: attr(margin-right px);
    margin-right: var(--attr-custom-margin-right)
}

[opacity] {
    --attr-custom-opacity: attr(opacity number);
    opacity: var(--attr-custom-opacity)
}

[overflow=auto] {
    overflow: auto
}

[overflow=hidden] {
    overflow: hidden
}

[overflow=visible] {
    overflow: visible
}

[overflow=scroll] {
    overflow: scroll
}

[padding] {
    --attr-custom-padding: attr(padding px);
    padding: var(--attr-custom-padding)
}

[padding-top] {
    --attr-custom-padding-top: attr(padding-top px);
    padding-top: var(--attr-custom-padding-top)
}

[padding-bottom] {
    --attr-custom-padding-bottom: attr(padding-bottom px);
    padding-bottom: var(--attr-custom-padding-bottom)
}

[padding-left] {
    --attr-custom-padding-left: attr(padding-left px);
    padding-left: var(--attr-custom-padding-left)
}

[padding-right] {
    --attr-custom-padding-right: attr(padding-right px);
    padding-right: var(--attr-custom-padding-right)
}

[text-color] {
    --attr-custom-text-color: attr(text-color color);
    color: var(--attr-custom-text-color)
}

[visibility=visible] {
    visibility: visible!important
}

[visibility=hidden] {
    visibility: hidden!important
}

:root {
    --alert-border-radius: 12px;
    --alert-border-width: 12px;
    --alert-font-size: 16px;
    --alert-padding: 16px;
    --alert-margin-bottom: 4px;
    --alert-background-color-primary: #b9c1f3;
    --alert-background-color-secondary: #d9c1f9;
    --alert-background-color-success: #abe9c9;
    --alert-background-color-info: #9fe9ed;
    --alert-background-color-warning: #fbd5ad;
    --alert-background-color-error: #ffbbb3;
    --alert-background-color-light: #d6d6d6;
    --alert-border-color-primary: #7383e7;
    --alert-border-color-secondary: #b383f3;
    --alert-border-color-success: #57d393;
    --alert-border-color-info: #3fd3db;
    --alert-border-color-warning: #f7ab5b;
    --alert-border-color-error: #ff7767;
    --alert-border-color-light: #adadad;
    --alert-text-color-primary: #20285a;
    --alert-text-color-secondary: #402860;
    --alert-text-color-success: #125030;
    --alert-text-color-info: #065054;
    --alert-text-color-warning: #623c14;
    --alert-text-color-error: #66221a;
    --alert-text-color-light: #3d3d3d;
    --alert-icon-color-primary: rgb(80, 100, 225);
    --alert-icon-color-secondary: rgb(160, 100, 240);
    --alert-icon-color-success: rgb(45, 200, 120);
    --alert-icon-color-info: rgb(15, 200, 210);
    --alert-icon-color-warning: rgb(245, 150, 50);
    --alert-icon-color-error: rgb(255, 85, 65);
    --alert-icon-color-light: #999999
}

@media(refers-color-scheme:dark) {
    :root {
        --alert-background-color-primary: #7383e7;
        --alert-background-color-secondary: #b383f3;
        --alert-background-color-success: #57d393;
        --alert-background-color-info: #3fd3db;
        --alert-background-color-warning: #f7ab5b;
        --alert-background-color-error: #ff7767;
        --alert-background-color-light: #adadad;
        --alert-border-color-primary: #4050b4;
        --alert-border-color-secondary: #8050c0;
        --alert-border-color-success: #24a060;
        --alert-border-color-info: #0ca0a8;
        --alert-border-color-warning: #c47828;
        --alert-border-color-error: #cc4434;
        --alert-border-color-light: #7a7a7a;
        --alert-text-color-primary: white;
        --alert-text-color-secondary: white;
        --alert-text-color-success: white;
        --alert-text-color-info: white;
        --alert-text-color-warning: white;
        --alert-text-color-error: white;
        --alert-text-color-light: white;
        --alert-icon-color-primary: #dce0f9;
        --alert-icon-color-secondary: #ece0fc;
        --alert-icon-color-success: #d5f4e4;
        --alert-icon-color-info: #cff4f6;
        --alert-icon-color-warning: #fdead6;
        --alert-icon-color-error: #ffddd9;
        --alert-icon-color-light: #ebebeb
    }
}

[dark-mode] {
    --alert-background-color-primary: #7383e7;
    --alert-background-color-secondary: #b383f3;
    --alert-background-color-success: #57d393;
    --alert-background-color-info: #3fd3db;
    --alert-background-color-warning: #f7ab5b;
    --alert-background-color-error: #ff7767;
    --alert-background-color-light: #adadad;
    --alert-border-color-primary: #4050b4;
    --alert-border-color-secondary: #8050c0;
    --alert-border-color-success: #24a060;
    --alert-border-color-info: #0ca0a8;
    --alert-border-color-warning: #c47828;
    --alert-border-color-error: #cc4434;
    --alert-border-color-light: #7a7a7a;
    --alert-text-color-primary: white;
    --alert-text-color-secondary: white;
    --alert-text-color-success: white;
    --alert-text-color-info: white;
    --alert-text-color-warning: white;
    --alert-text-color-error: white;
    --alert-text-color-light: white;
    --alert-icon-color-primary: #dce0f9;
    --alert-icon-color-secondary: #ece0fc;
    --alert-icon-color-success: #d5f4e4;
    --alert-icon-color-info: #cff4f6;
    --alert-icon-color-warning: #fdead6;
    --alert-icon-color-error: #ffddd9;
    --alert-icon-color-light: #ebebeb
}

.wux-alert {
    position: relative;
    border-radius: var(--alert-border-radius);
    border-left-width: var(--alert-border-width);
    font-size: var(--alert-font-size);
    padding: var(--alert-padding);
    margin-bottom: var(--alert-margin-bottom);
    background-color: var(--alert-background-color-primary);
    color: var(--alert-text-color-primary);
    border-left-color: var(--alert-border-color-primary)
}

.wux-alert:after,.wux-alert:before {
    content: "";
    display: table;
    clear: both
}

.wux-alert .wux-alert-icon {
    color: var(--alert-icon-color-primary);
    margin-right: 2px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.wux-alert .wux-alert-option-group {
    float: right
}

.wux-alert-primary {
    background-color: var(--alert-background-color-primary);
    color: var(--alert-text-color-primary);
    border-left-color: var(--alert-border-color-primary)
}

.wux-alert-primary .wux-alert-icon {
    color: var(--alert-icon-color-primary);
    margin-right: 2px
}

.wux-alert-secondary {
    background-color: var(--alert-background-color-secondary);
    color: var(--alert-text-color-secondary);
    border-left-color: var(--alert-border-color-secondary)
}

.wux-alert-secondary .wux-alert-icon {
    color: var(--alert-icon-color-secondary);
    margin-right: 2px
}

.wux-alert-success {
    background-color: var(--alert-background-color-success);
    color: var(--alert-text-color-success);
    border-left-color: var(--alert-border-color-success)
}

.wux-alert-success .wux-alert-icon {
    color: var(--alert-icon-color-success);
    margin-right: 2px
}

.wux-alert-info {
    background-color: var(--alert-background-color-info);
    color: var(--alert-text-color-info);
    border-left-color: var(--alert-border-color-info)
}

.wux-alert-info .wux-alert-icon {
    color: var(--alert-icon-color-info);
    margin-right: 2px
}

.wux-alert-warning {
    background-color: var(--alert-background-color-warning);
    color: var(--alert-text-color-warning);
    border-left-color: var(--alert-border-color-warning)
}

.wux-alert-warning .wux-alert-icon {
    color: var(--alert-icon-color-warning);
    margin-right: 2px
}

.wux-alert-error {
    background-color: var(--alert-background-color-error);
    color: var(--alert-text-color-error);
    border-left-color: var(--alert-border-color-error)
}

.wux-alert-error .wux-alert-icon {
    color: var(--alert-icon-color-error);
    margin-right: 2px
}

.wux-alert-light {
    background-color: var(--alert-background-color-light);
    color: var(--alert-text-color-light);
    border-left-color: var(--alert-border-color-light)
}

.wux-alert-light .wux-alert-icon {
    color: var(--alert-icon-color-light);
    margin-right: 2px
}

:root {
    --badge-font-size: 10px;
    --badge-padding: 4px;
    --badge-background-color: #FF2222;
    --badge-text-color: #FFFFFF
}

@media(refers-color-scheme:dark) {
    :root {
        --badge-background-color: #FF4444;
        --badge-text-color: #FFFFFF
    }
}

[dark-mode] {
    --badge-background-color: #FF4444;
    --badge-text-color: #FFFFFF
}

.wux-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    border-radius: 9999px;
    background-color: var(--badge-background-color);
    color: var(--badge-text-color);
    font-size: var(--badge-font-size);
    height: 12px;
    padding: var(--badge-padding);
    min-width: 12px;
    max-width: 20px;
    opacity: 95%;
    z-index: 1
}

:root {
    --breadcrumb-background-color: transparent;
    --breadcrumb-border: none;
    --breadcrumb-border-radius: 12px;
    --breadcrumb-color: #121212;
    --breadcrumb-font-size: 14px;
    --breadcrumb-padding-x: 10px;
    --breadcrumb-padding-y: 12px;
    --breadcrumb-padding-item-x: 6px;
    --breadcrumb-margin-bottom: 2px;
    --breadcrumb-item-link-color: #4050b4
}

@media(refers-color-scheme:dark) {
    :root {
        --breadcrumb-background-color: transparent;
        --breadcrumb-border: none;
        --breadcrumb-color: #FFFFFF;
        --breadcrumb-item-link-color: #7383e7
    }
}

[dark-mode] {
    --breadcrumb-background-color: transparent;
    --breadcrumb-border: none;
    --breadcrumb-color: #FFFFFF;
    --breadcrumb-item-link-color: #7383e7
}

.wux-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    background-color: var(--breadcrumb-background-color);
    border: var(--breadcrumb-border);
    border-radius: var(--breadcrumb-border-radius);
    color: var(--breadcrumb-color);
    padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
    margin-bottom: var(--breadcrumb-margin-bottom)
}

.wux-breadcrumb-item {
    font-size: var(--breadcrumb-font-size)
}

.wux-breadcrumb-item+.wux-breadcrumb-item {
    padding-left: var(--breadcrumb-padding-item-x)
}

.wux-breadcrumb-item+.wux-breadcrumb-item::before {
    float: left;
    padding-right: var(--breadcrumb-padding-item-x);
    content: "/"
}

.wux-breadcrumb-item a {
    text-decoration: none;
    color: var(--breadcrumb-item-link-color)
}

.wux-breadcrumb-item a:hover {
    text-decoration: underline
}

:root {
    --blankslate-width: 80%;
    --blankslate-title-font-size: 24px;
    --blankslate-title-text-color: #121212;
    --blankslate-subtitle-font-size: 14px;
    --blankslate-subtitle-text-color: #666666;
    --blankslate-icon-size: 72px;
    --blankslate-icon-border-radius: 12px
}

@media(refers-color-scheme:dark) {
    :root {
        --blankslate-title-text-color: #FCFCFC;
        --blankslate-subtitle-text-color: #666666
    }
}

[dark-mode] {
    --blankslate-title-text-color: #FCFCFC;
    --blankslate-subtitle-text-color: #666666
}

.wux-blankslate {
    margin-right: auto;
    margin-left: auto;
    width: var(--blankslate-width);
    text-align: center
}

.wux-blankslate .wux-blankslate-title {
    font-size: var(--blankslate-title-font-size);
    color: var(--blankslate-title-text-color)
}

.wux-blankslate .wux-blankslate-subtitle {
    font-size: var(--blankslate-subtitle-font-size);
    color: var(--blankslate-subtitle-text-color)
}

.wux-blankslate .wux-blankslate-button-group {
    white-space: pre-line
}

.wux-blankslate .wux-blankslate-button-group .wux-btn {
    margin-right: none;
    margin-bottom: 6px
}

.wux-blankslate .wux-blankslate-icon {
    width: var(--blankslate-icon-size);
    height: var(--blankslate-icon-size);
    border-radius: var(--blankslate-icon-border-radius)
}

:root {
    --button-solid-border-width: 0px;
    --button-outline-border-width: 1px;
    --button-margin-right: 0;
    --button-margin-bottom: 4px;
    --button-fab-shadow: 1px 1px 4px 1px #888888;
    --button-fab-hover-shadow: 1px 1px 6px 2px #888888;
    --button-background-color-primary: rgb(80, 100, 225);
    --button-background-color-secondary: rgb(160, 100, 240);
    --button-background-color-success: rgb(45, 200, 120);
    --button-background-color-info: rgb(15, 200, 210);
    --button-background-color-warning: rgb(245, 150, 50);
    --button-background-color-error: rgb(255, 85, 65);
    --button-background-color-light: #999999;
    --button-border-color-primary: #4050b4;
    --button-border-color-secondary: #8050c0;
    --button-border-color-success: #24a060;
    --button-border-color-info: #0ca0a8;
    --button-border-color-warning: #c47828;
    --button-border-color-error: #cc4434;
    --button-border-color-light: #7a7a7a;
    --button-text-color-primary: white;
    --button-text-color-secondary: white;
    --button-text-color-success: white;
    --button-text-color-info: white;
    --button-text-color-warning: white;
    --button-text-color-error: white;
    --button-text-color-light: white;
    --button-border-size-square: 0;
    --button-border-size-default: 12px;
    --button-border-size-default-xs: 8px;
    --button-border-size-default-sm: 10px;
    --button-border-size-default-md: 12px;
    --button-border-size-default-lg: 14px;
    --button-border-size-default-xl: 16px;
    --button-border-size-round: 9999px;
    --button-padding-x-xs: 10px;
    --button-padding-x-sm: 12px;
    --button-padding-x-md: 16px;
    --button-padding-x-lg: 20px;
    --button-padding-x-xl: 24px;
    --button-padding-y-xs: 4px;
    --button-padding-y-sm: 6px;
    --button-padding-y-md: 10px;
    --button-padding-y-lg: 14px;
    --button-padding-y-xl: 18px;
    --button-font-size-xs: 10px;
    --button-font-size-sm: 12px;
    --button-font-size-md: 14px;
    --button-font-size-lg: 16px;
    --button-font-size-xl: 18px
}

@media(refers-color-scheme:dark) {
    :root {
        --button-fab-shadow: 1px 1px 4px 1px #000000;
        --button-fab-hover-shadow: 1px 1px 6px 2px #000000;
        --button-background-color-primary: #7383e7;
        --button-background-color-secondary: #b383f3;
        --button-background-color-success: #57d393;
        --button-background-color-info: #3fd3db;
        --button-background-color-warning: #f7ab5b;
        --button-background-color-error: #ff7767;
        --button-background-color-light: #adadad;
        --button-border-color-primary: rgb(80, 100, 225);
        --button-border-color-secondary: rgb(160, 100, 240);
        --button-border-color-success: rgb(45, 200, 120);
        --button-border-color-info: rgb(15, 200, 210);
        --button-border-color-warning: rgb(245, 150, 50);
        --button-border-color-error: rgb(255, 85, 65);
        --button-border-color-light: #999999;
        --button-text-color-primary: white;
        --button-text-color-secondary: white;
        --button-text-color-success: white;
        --button-text-color-info: white;
        --button-text-color-warning: white;
        --button-text-color-error: white;
        --button-text-color-light: white
    }
}

[dark-mode] {
    --button-fab-shadow: 1px 1px 4px 1px #000000;
    --button-fab-hover-shadow: 1px 1px 6px 2px #000000;
    --button-background-color-primary: #7383e7;
    --button-background-color-secondary: #b383f3;
    --button-background-color-success: #57d393;
    --button-background-color-info: #3fd3db;
    --button-background-color-warning: #f7ab5b;
    --button-background-color-error: #ff7767;
    --button-background-color-light: #adadad;
    --button-border-color-primary: rgb(80, 100, 225);
    --button-border-color-secondary: rgb(160, 100, 240);
    --button-border-color-success: rgb(45, 200, 120);
    --button-border-color-info: rgb(15, 200, 210);
    --button-border-color-warning: rgb(245, 150, 50);
    --button-border-color-error: rgb(255, 85, 65);
    --button-border-color-light: #999999;
    --button-text-color-primary: white;
    --button-text-color-copeipei: #000
    --button-text-color-secondary: white;
    --button-text-color-success: white;
    --button-text-color-info: white;
    --button-text-color-warning: white;
    --button-text-color-error: white;
    --button-text-color-light: white
}

.wux-btn,.wux-btn.wux-solid {
    position: relative;
    appearance: button;
    -webkit-appearance: button;
    box-shadow: none;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
    margin-right: var(--button-margin-right);
    margin-bottom: var(--button-margin-bottom);
    white-space: nowrap;
    vertical-align: middle;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed);
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    //background-color: var(--button-background-color-primary);
    //color: var(--button-text-color-primary);
    border: var(--button-solid-border-width) solid var(--button-border-color-primary);
    border-radius: var(--button-border-size-default-md);
    padding: var(--button-padding-y-md) var(--button-padding-x-md);
    font-size: var(--button-font-size-md)
}

.wux-btn.wux-solid:disabled,.wux-btn:disabled {
    cursor: default
}

.wux-btn.wux-solid:hover:not(:disabled),.wux-btn:hover:not(:disabled) {
    background-color: var(--button-border-color-primary);
    color: var(--button-text-color-primary)
}

/*.wux-btn.wux-solid:hover:not(:disabled),.wux-btn {
    background-color: var(--button-border-color-primary);
    color: var(--button-text-color-primary)*/

.wux-btn.wux-btn-active,.wux-btn.wux-solid.wux-btn-active,.wux-btn.wux-solid:focus:not(:disabled),.wux-btn:focus:not(:disabled) {
    background-color: var(--button-border-color-primary);
    color: var(--button-text-color-primary);
    outline: 0
}

.wux-btn.wux-solid:disabled,.wux-btn:disabled {
    	cursor: not-allowed;
	opacity: 50%!important
}

.wux-btn.wux-btn-outline,.wux-btn.wux-solid.wux-btn-outline {
    background: rgba(0,0,0,0);
    color: var(--button-background-color-primary);
    border: var(--button-outline-border-width) solid var(--button-border-color-primary)
}

.wux-btn.wux-btn-outline:hover:not(:disabled),.wux-btn.wux-solid.wux-btn-outline:hover:not(:disabled) {
    background: var(--button-border-color-primary);
    color: var(--button-text-color-primary)
}

.wux-btn.wux-btn-outline.wux-btn-active,.wux-btn.wux-btn-outline:focus:not(:disabled),.wux-btn.wux-solid.wux-btn-outline.wux-btn-active,.wux-btn.wux-solid.wux-btn-outline:focus:not(:disabled) {
    background-color: var(--button-border-color-orimary);
    color: var(--button-text-color-primary)
}

.wux-btn.wux-btn-text,.wux-btn.wux-solid.wux-btn-text {
    background: rgba(0,0,0,0);
    color: var(--button-background-color-primary);
    border: none
}

.wux-btn.wux-btn-text:hover:not(:disabled),.wux-btn.wux-solid.wux-btn-text:hover:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-primary)
}

.wux-btn.wux-btn-text.wux-btn-active,.wux-btn.wux-btn-text:focus:not(:disabled),.wux-btn.wux-solid.wux-btn-text.wux-btn-active,.wux-btn.wux-solid.wux-btn-text:focus:not(:disabled) {
    background-color: rgba(0,0,0,0);
    color: var(--button-border-color-primary)
}

.wux-btn.wux-btn-block,.wux-btn.wux-solid.wux-btn-block {
    width: 100%
}

.wux-btn.wux-btn-fab,.wux-btn.wux-solid.wux-btn-fab {
    position: fixed;
    z-index: 2;
    bottom: 15px;
    right: 15px;
    box-shadow: var(--button-fab-shadow)
}

.wux-btn.wux-btn-fab:not(:nth-child(1)),.wux-btn.wux-solid.wux-btn-fab:not(:nth-child(1)) {
    display: none
}

.wux-btn.wux-btn-fab:hover,.wux-btn.wux-solid.wux-btn-fab:hover {
    box-shadow: var(--button-fab-hover-shadow)
}

.wux-btn-primary,.wux-btn-solid.wux-btn-primary {
    background-color: rgb(255 255 255);
    color: #000000;
    border-color: #2a3266
}

.wux-btn-primary:hover:not(:disabled),.wux-btn-solid.wux-btn-primary:hover:not(:disabled) {
    background-color: var(--button-border-color-primary);
    color: var(--button-text-color-primary)
}

.wux-btn-primary.wux-btn-active,.wux-btn-primary:focus:not(:disabled),.wux-btn-solid.wux-btn-primary.wux-btn-active,.wux-btn-solid.wux-btn-primary:focus:not(:disabled) {
    background-color: var(--button-border-color-primary);
    color: var(--button-text-color-primary)
}

.wux-btn.wux-btn-outline.wux-btn-primary {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-primary);
    border-color: var(--button-border-color-primary)
}

.wux-btn.wux-btn-outline.wux-btn-primary:hover:not(:disabled) {
    background: var(--button-border-color-primary);
    color: var(--button-text-color-primary)
}

.wux-btn.wux-btn-outline.wux-btn-primary.wux-btn-active,.wux-btn.wux-btn-outline.wux-btn-primary:focus:not(:disabled) {
    background: var(--button-border-color-primary);
    color: var(--button-text-color-primary)
}

.wux-btn.wux-btn-text.wux-btn-primary {
    background: rgba(0,0,0,0);
    color: var(--button-background-color-primary);
    border: none
}

.wux-btn.wux-btn-text.wux-btn-primary:hover:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-primary)
}

.wux-btn.wux-btn-text.wux-btn-primary.wux-btn-active,.wux-btn.wux-btn-text.wux-btn-primary:focus:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-primary);
    box-shadow: none
}

.wux-btn-secondary,.wux-btn-solid.wux-btn-secondary {
    background-color: var(--button-background-color-secondary);
    color: var(--button-text-color-secondary);
    border-color: var(--button-border-color-secondary)
}

.wux-btn-secondary:hover:not(:disabled),.wux-btn-solid.wux-btn-secondary:hover:not(:disabled) {
    background-color: var(--button-border-color-secondary);
    color: var(--button-text-color-secondary)
}

.wux-btn-secondary.wux-btn-active,.wux-btn-secondary:focus:not(:disabled),.wux-btn-solid.wux-btn-secondary.wux-btn-active,.wux-btn-solid.wux-btn-secondary:focus:not(:disabled) {
    background-color: var(--button-border-color-secondary);
    color: var(--button-text-color-secondary)
}

.wux-btn.wux-btn-outline.wux-btn-secondary {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-secondary);
    border-color: var(--button-border-color-secondary)
}

.wux-btn.wux-btn-outline.wux-btn-secondary:hover:not(:disabled) {
    background: var(--button-border-color-secondary);
    color: var(--button-text-color-secondary)
}

.wux-btn.wux-btn-outline.wux-btn-secondary.wux-btn-active,.wux-btn.wux-btn-outline.wux-btn-secondary:focus:not(:disabled) {
    background: var(--button-border-color-secondary);
    color: var(--button-text-color-secondary)
}

.wux-btn.wux-btn-text.wux-btn-secondary {
    background: rgba(0,0,0,0);
    color: var(--button-background-color-secondary);
    border: none
}

.wux-btn.wux-btn-text.wux-btn-secondary:hover:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-secondary)
}

.wux-btn.wux-btn-text.wux-btn-secondary.wux-btn-active,.wux-btn.wux-btn-text.wux-btn-secondary:focus:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-secondary);
    box-shadow: none
}

.wux-btn-solid.wux-btn-success,.wux-btn-success {
    background-color: var(--button-background-color-success);
    color: var(--button-text-color-success);
    border-color: var(--button-border-color-success)
}

.wux-btn-solid.wux-btn-success:hover:not(:disabled),.wux-btn-success:hover:not(:disabled) {
    background-color: var(--button-border-color-success);
    color: var(--button-text-color-success)
}

.wux-btn-solid.wux-btn-success.wux-btn-active,.wux-btn-solid.wux-btn-success:focus:not(:disabled),.wux-btn-success.wux-btn-active,.wux-btn-success:focus:not(:disabled) {
    background-color: var(--button-border-color-success);
    color: var(--button-text-color-success)
}

.wux-btn.wux-btn-outline.wux-btn-success {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-success);
    border-color: var(--button-border-color-success)
}

.wux-btn.wux-btn-outline.wux-btn-success:hover:not(:disabled) {
    background: var(--button-border-color-success);
    color: var(--button-text-color-success)
}

.wux-btn.wux-btn-outline.wux-btn-success.wux-btn-active,.wux-btn.wux-btn-outline.wux-btn-success:focus:not(:disabled) {
    background: var(--button-border-color-success);
    color: var(--button-text-color-success)
}

.wux-btn.wux-btn-text.wux-btn-success {
    background: rgba(0,0,0,0);
    color: var(--button-background-color-success);
    border: none
}

.wux-btn.wux-btn-text.wux-btn-success:hover:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-success)
}

.wux-btn.wux-btn-text.wux-btn-success.wux-btn-active,.wux-btn.wux-btn-text.wux-btn-success:focus:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-success);
    box-shadow: none
}

.wux-btn-info,.wux-btn-solid.wux-btn-info {
    background-color: var(--button-background-color-info);
    color: var(--button-text-color-info);
    border-color: var(--button-border-color-info)
}

.wux-btn-info:hover:not(:disabled),.wux-btn-solid.wux-btn-info:hover:not(:disabled) {
    background-color: var(--button-border-color-info);
    color: var(--button-text-color-info)
}

.wux-btn-info.wux-btn-active,.wux-btn-info:focus:not(:disabled),.wux-btn-solid.wux-btn-info.wux-btn-active,.wux-btn-solid.wux-btn-info:focus:not(:disabled) {
    background-color: var(--button-border-color-info);
    color: var(--button-text-color-info)
}

.wux-btn.wux-btn-outline.wux-btn-info {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-info);
    border-color: var(--button-border-color-info)
}

.wux-btn.wux-btn-outline.wux-btn-info:hover:not(:disabled) {
    background: var(--button-border-color-info);
    color: var(--button-text-color-info)
}

.wux-btn.wux-btn-outline.wux-btn-info.wux-btn-active,.wux-btn.wux-btn-outline.wux-btn-info:focus:not(:disabled) {
    background: var(--button-border-color-info);
    color: var(--button-text-color-info)
}

.wux-btn.wux-btn-text.wux-btn-info {
    background: rgba(0,0,0,0);
    color: var(--button-background-color-info);
    border: none
}

.wux-btn.wux-btn-text.wux-btn-info:hover:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-info)
}

.wux-btn.wux-btn-text.wux-btn-info.wux-btn-active,.wux-btn.wux-btn-text.wux-btn-info:focus:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-info);
    box-shadow: none
}

.wux-btn-solid.wux-btn-warning,.wux-btn-warning {
    background-color: var(--button-background-color-warning);
    color: var(--button-text-color-warning);
    border-color: var(--button-border-color-warning)
}

.wux-btn-solid.wux-btn-warning:hover:not(:disabled),.wux-btn-warning:hover:not(:disabled) {
    background-color: var(--button-border-color-warning);
    color: var(--button-text-color-warning)
}

.wux-btn-solid.wux-btn-warning.wux-btn-active,.wux-btn-solid.wux-btn-warning:focus:not(:disabled),.wux-btn-warning.wux-btn-active,.wux-btn-warning:focus:not(:disabled) {
    background-color: var(--button-border-color-warning);
    color: var(--button-text-color-warning)
}

.wux-btn.wux-btn-outline.wux-btn-warning {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-warning);
    border-color: var(--button-border-color-warning)
}

.wux-btn.wux-btn-outline.wux-btn-warning:hover:not(:disabled) {
    background: var(--button-border-color-warning);
    color: var(--button-text-color-warning)
}

.wux-btn.wux-btn-outline.wux-btn-warning.wux-btn-active,.wux-btn.wux-btn-outline.wux-btn-warning:focus:not(:disabled) {
    background: var(--button-border-color-warning);
    color: var(--button-text-color-warning)
}

.wux-btn.wux-btn-text.wux-btn-warning {
    background: rgba(0,0,0,0);
    color: var(--button-background-color-warning);
    border: none
}

.wux-btn.wux-btn-text.wux-btn-warning:hover:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-warning)
}

.wux-btn.wux-btn-text.wux-btn-warning.wux-btn-active,.wux-btn.wux-btn-text.wux-btn-warning:focus:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-warning);
    box-shadow: none
}

.wux-btn-error,.wux-btn-solid.wux-btn-error {
    background-color: var(--button-background-color-error);
    color: var(--button-text-color-error);
    border-color: var(--button-border-color-error)
}

.wux-btn-error:hover:not(:disabled),.wux-btn-solid.wux-btn-error:hover:not(:disabled) {
    background-color: var(--button-border-color-error);
    color: var(--button-text-color-error)
}

.wux-btn-error.wux-btn-active,.wux-btn-error:focus:not(:disabled),.wux-btn-solid.wux-btn-error.wux-btn-active,.wux-btn-solid.wux-btn-error:focus:not(:disabled) {
    background-color: var(--button-border-color-error);
    color: var(--button-text-color-error)
}

.wux-btn.wux-btn-outline.wux-btn-error {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-error);
    border-color: var(--button-border-color-error)
}

.wux-btn.wux-btn-outline.wux-btn-error:hover:not(:disabled) {
    background: var(--button-border-color-error);
    color: var(--button-text-color-error)
}

.wux-btn.wux-btn-outline.wux-btn-error.wux-btn-active,.wux-btn.wux-btn-outline.wux-btn-error:focus:not(:disabled) {
    background: var(--button-border-color-error);
    color: var(--button-text-color-error)
}

.wux-btn.wux-btn-text.wux-btn-error {
    background: rgba(0,0,0,0);
    color: var(--button-background-color-error);
    border: none
}

.wux-btn.wux-btn-text.wux-btn-error:hover:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-error)
}

.wux-btn.wux-btn-text.wux-btn-error.wux-btn-active,.wux-btn.wux-btn-text.wux-btn-error:focus:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-error);
    box-shadow: none
}

.wux-btn-light,.wux-btn-solid.wux-btn-light {
    background-color: var(--button-background-color-light);
    color: var(--button-text-color-light);
    border-color: var(--button-border-color-light)
}

.wux-btn-light:hover:not(:disabled),.wux-btn-solid.wux-btn-light:hover:not(:disabled) {
    background-color: var(--button-border-color-light);
    color: var(--button-text-color-light)
}

.wux-btn-light.wux-btn-active,.wux-btn-light:focus:not(:disabled),.wux-btn-solid.wux-btn-light.wux-btn-active,.wux-btn-solid.wux-btn-light:focus:not(:disabled) {
    background-color: var(--button-border-color-light);
    color: var(--button-text-color-light)
}

.wux-btn.wux-btn-outline.wux-btn-light {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-light);
    border-color: var(--button-border-color-light)
}

.wux-btn.wux-btn-outline.wux-btn-light:hover:not(:disabled) {
    background: var(--button-border-color-light);
    color: var(--button-text-color-light)
}

.wux-btn.wux-btn-outline.wux-btn-light.wux-btn-active,.wux-btn.wux-btn-outline.wux-btn-light:focus:not(:disabled) {
    background: var(--button-border-color-light);
    color: var(--button-text-color-light)
}

.wux-btn.wux-btn-text.wux-btn-light {
    background: rgba(0,0,0,0);
    color: var(--button-background-color-light);
    border: none
}

.wux-btn.wux-btn-text.wux-btn-light:hover:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-light)
}

.wux-btn.wux-btn-text.wux-btn-light.wux-btn-active,.wux-btn.wux-btn-text.wux-btn-light:focus:not(:disabled) {
    background: rgba(0,0,0,0);
    color: var(--button-border-color-light);
    box-shadow: none
}

.wux-btn-xs {
    padding: var(--button-padding-y-xs) var(--button-padding-x-xs);
    font-size: var(--button-font-size-xs);
    border-radius: var(--button-border-size-default-xs)
}

.wux-btn-sm {
    padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
    font-size: var(--button-font-size-sm);
    border-radius: var(--button-border-size-default-sm)
}

.copeipei-wux-button {
    color: var(--button-text-color-copeipei);
}

.wux-btn-md {
    padding: var(--button-padding-y-md) var(--button-padding-x-md);
    font-size: var(--button-font-size-md);
    border-radius: var(--button-border-size-default-md)
}

.wux-btn-lg {
    padding: var(--button-padding-y-lg) var(--button-padding-x-lg);
    font-size: var(--button-font-size-lg);
    border-radius: var(--button-border-size-default-lg)
}

.wux-btn-xl {
    padding: var(--button-padding-y-xl) var(--button-padding-x-xl);
    font-size: var(--button-font-size-xl);
    border-radius: var(--button-border-size-default-xl)
}

.wux-btn-square {
    border-radius: var(--button-border-size-square)
}

.wux-btn-default {
    border-radius: var(--button-border-size-default)
}

.wux-btn-round {
    border-radius: var(--button-border-size-round)
}

.wux-btn-group {
    display: inline-flex;
    position: relative;
    white-space: nowrap;
    margin-bottom: var(--button-margin-bottom)
}

.wux-btn-group .wux-btn {
    border-radius: 0;
    margin: 0
}

.wux-btn-group .wux-btn:first-child {
    border-top-left-radius: var(--button-border-size-default-md);
    border-bottom-left-radius: var(--button-border-size-default-md)
}

.wux-btn-group .wux-btn:last-child {
    border-top-right-radius: var(--button-border-size-default-md);
    border-bottom-right-radius: var(--button-border-size-default-md)
}

.wux-btn-group-xs .wux-btn {
    font-size: var(--button-font-size-xs);
    padding: var(--button-padding-y-xs) var(--button-padding-x-xs)
}

.wux-btn-group-xs .wux-btn:first-child {
    border-top-left-radius: var(--button-border-size-default-xs);
    border-bottom-left-radius: var(--button-border-size-default-xs)
}

.wux-btn-group-xs .wux-btn:last-child {
    border-top-right-radius: var(--button-border-size-default-xs);
    border-bottom-right-radius: var(--button-border-size-default-xs)
}

.wux-btn-group-sm .wux-btn {
    font-size: var(--button-font-size-sm);
    padding: var(--button-padding-y-sm) var(--button-padding-x-sm)
}

.wux-btn-group-sm .wux-btn:first-child {
    border-top-left-radius: var(--button-border-size-default-sm);
    border-bottom-left-radius: var(--button-border-size-default-sm)
}

.wux-btn-group-sm .wux-btn:last-child {
    border-top-right-radius: var(--button-border-size-default-sm);
    border-bottom-right-radius: var(--button-border-size-default-sm)
}

.wux-btn-group-md .wux-btn {
    font-size: var(--button-font-size-md);
    padding: var(--button-padding-y-md) var(--button-padding-x-md)
}

.wux-btn-group-md .wux-btn:first-child {
    border-top-left-radius: var(--button-border-size-default-md);
    border-bottom-left-radius: var(--button-border-size-default-md)
}

.wux-btn-group-md .wux-btn:last-child {
    border-top-right-radius: var(--button-border-size-default-md);
    border-bottom-right-radius: var(--button-border-size-default-md)
}

.wux-btn-group-lg .wux-btn {
    font-size: var(--button-font-size-lg);
    padding: var(--button-padding-y-lg) var(--button-padding-x-lg)
}

.wux-btn-group-lg .wux-btn:first-child {
    border-top-left-radius: var(--button-border-size-default-lg);
    border-bottom-left-radius: var(--button-border-size-default-lg)
}

.wux-btn-group-lg .wux-btn:last-child {
    border-top-right-radius: var(--button-border-size-default-lg);
    border-bottom-right-radius: var(--button-border-size-default-lg)
}

.wux-btn-group-xl .wux-btn {
    font-size: var(--button-font-size-xl);
    padding: var(--button-padding-y-xl) var(--button-padding-x-xl)
}

.wux-btn-group-xl .wux-btn:first-child {
    border-top-left-radius: var(--button-border-size-default-xl);
    border-bottom-left-radius: var(--button-border-size-default-xl)
}

.wux-btn-group-xl .wux-btn:last-child {
    border-top-right-radius: var(--button-border-size-default-xl);
    border-bottom-right-radius: var(--button-border-size-default-xl)
}

:root {
    --card-border-color: rgb(200, 200, 200);
    --card-border-radius: 12px;
    --card-border-width: 0px;
    --card-background-color: white;
    --card-shadow: 1px 1px 6px #DDDDDD;
    --card-hover-shadow: 2px 2px 8px #CCCCCC;
    --card-text-color: rgb(25, 25, 25);
    --card-margin: 2px;
    --card-body-padding: 12px;
    --card-body-font-size: 16px;
    --card-flat-background: #F1F1F1;
    --card-flat-border: none
}

@media(refers-color-scheme:dark) {
    :root {
        --card-border-color: rgb(200, 200, 200);
        --card-background-color: #242424;
        --card-shadow: 1px 1px 6px #040404;
        --card-hover-shadow: 2px 2px 8px #040404;
        --card-text-color: #F2F2F2;
        --card-flat-background: #060606;
        --card-flat-border: #121212
    }
}

[dark-mode] {
    --card-border-color: rgb(200, 200, 200);
    --card-background-color: #242424;
    --card-shadow: 1px 1px 6px #040404;
    --card-hover-shadow: 2px 2px 8px #040404;
    --card-text-color: #F2F2F2;
    --card-flat-background: #060606;
    --card-flat-border: #121212
}

.wux-card,.wux-card-float {
    position: relative;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    overflow: hidden;
    border-radius: var(--card-border-radius);
    border: var(--card-border-width) solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    background-color: var(--card-background-color);
    color: var(--card-text-color);
    padding: 0;
    margin: var(--card-margin);
    transition: box-shadow .2s;
    -webkit-transition: box-shadow .2s
}

.wux-card .wux-card-header,.wux-card-float .wux-card-header {
    position: relative;
    text-overflow: ellipsis
}

.wux-card .wux-card-header img,.wux-card .wux-card-header video,.wux-card-float .wux-card-header img,.wux-card-float .wux-card-header video {
    display: block;
    width: 100%
}

.wux-card .wux-card-body,.wux-card-float .wux-card-body {
    position: relative;
    padding: var(--card-body-padding);
    font-size: var(--card-body-font-size)
}

.wux-card .wux-card-footer,.wux-card-float .wux-card-footer {
    overflow: hidden;
    padding: 0;
    margin: 0;
    float: right
}

.wux-card .wux-card-footer::after,.wux-card .wux-card-footer::before,.wux-card-float .wux-card-footer::after,.wux-card-float .wux-card-footer::before {
    display: table;
    clear: both
}

.wux-card .wux-card-footer::after,.wux-card-float .wux-card-footer::after {
    content: ""
}

.wux-card .wux-card-footer .wux-btn,.wux-card-float .wux-card-footer .wux-btn {
    margin: 0
}

.wux-card .wux-card,.wux-card-float .wux-card,.wux-card-float.wux-card-flat,.wux-card.wux-card-flat {
    background: var(--card-flat-background);
    border: var(--card-flat-border);
    border-radius: var(--card-border-radius);
    box-shadow: none
}

.wux-card-hover:hover {
    box-shadow: var(--card-hover-shadow)
}

:root {
    --collapse-header-background-color: #F2F2F2;
    --collapse-header-border: none;
    --collapse-header-border-radius: 12px;
    --collapse-header-padding: 10px 12px;
    --collapse-header-text-color: #121212;
    --collapse-body-background-color: #F8F8F8;
    --collapse-body-border: none;
    --collapse-body-border-radius: 0 0 12px 12px;
    --collapse-body-padding: 12px;
    --collapse-body-margin-top: 4px;
    --collapse-body-text-color: #121212
}

@media(refers-color-scheme:dark) {
    :root {
        --collapse-header-background-color: #161616;
        --collapse-header-border: none;
        --collapse-header-text-color: #FCFCFC;
        --collapse-body-background-color: #282828;
        --collapse-body-border: none;
        --collapse-body-text-color: #FFFFFF
    }
}

[dark-mode] {
    --collapse-header-background-color: #161616;
    --collapse-header-border: none;
    --collapse-header-text-color: #FCFCFC;
    --collapse-body-background-color: #282828;
    --collapse-body-border: none;
    --collapse-body-text-color: #FFFFFF
}

details.wux-collapse {
    width: 100%
}

details.wux-collapse summary {
    background-color: var(--collapse-header-background-color);
    border: var(--collapse-header-border);
    border-radius: var(--collapse-header-border-radius);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: var(--collapse-header-text-color);
    padding: var(--collapse-header-padding);
    list-style: none;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

details.wux-collapse summary::webkit-details-maker {
    display: none
}

details.wux-collapse div {
    background-color: var(--collapse-body-background-color);
    border: var(--collapse-body-border);
    border-radius: var(--collapse-body-border-radius);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: var(--collapse-body-text-color);
    padding: var(--collapse-body-padding);
    margin-top: var(--collapse-body-margin-top);
    width: 100%
}

details.wux-collapse[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

:root {
    --dialog-background-color: #FCFCFC;
    --dialog-border: none;
    --dialog-border-radius: 12px;
    --dialog-padding: 24px;
    --dialog-shadow: none;
    --dialog-backdrop-color: rgba(50, 50, 50, 0.8);
    --dialog-body-padding-x: 0;
    --dialog-body-padding-y: 8px;
    --dialog-body-font-size: 16px;
    --dialog-body-text-color: #000000;
    --dialog-footer-group-float: right
}

@media(refers-color-scheme:dark) {
    :root {
        --dialog-background-color: #121212;
        --dialog-border: none;
        --dialog-shadow: none;
        --dialog-header-text-color: #F1F1F1;
        --dialog-body-text-color: #FFFFFF
    }
}

[dark-mode] {
    --dialog-background-color: #121212;
    --dialog-border: none;
    --dialog-shadow: none;
    --dialog-header-text-color: #F1F1F1;
    --dialog-body-text-color: #FFFFFF
}

.wux-dialog {
    background-color: var(--dialog-background-color);
    border: var(--dialog-border);
    border-radius: var(--dialog-border-radius);
    box-shadow: var(--dialog-shadow);
    display: block;
    position: fixed;
    width: 80%;
    min-width: 180px;
    max-width: 400px;
    min-height: 200px;
    overflow: auto;
    padding: var(--dialog-padding)
}

.wux-dialog::backdrop {
    background-color: rgba(50,50,50,.8)
}

.wux-dialog .backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(50,50,50,.8)
}

.wux-dialog:not([open]) {
    display: none
}

.wux-dialog .wux-dialog-header {
    color: var(--dialog-header-text-color)
}

.wux-dialog .wux-dialog-header .wux-dialog-header-title {
    margin: 0
}

.wux-dialog .wux-dialog-body {
    color: var(--dialog-body-text-color);
    font-size: var(--dialog-body-font-size);
    min-height: 120px;
    padding: var(--dialog-body-padding-y) var(--dialog-body-padding-x);
    display: block;
    overflow: auto
}

.wux-dialog .wux-dialog-footer:after {
    display: table;
    clear: both;
    content: ""
}

.wux-dialog .wux-dialog-footer .wux-dialog-footer-group {
    float: var(--dialog-footer-group-float)
}

._dialog_overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(50,50,50,.8)
}

:root {
    --dropdown-menu-background: #FCFCFCF;
    --dropdown-menu-border: 2px solid #CCCCCC;
    --dropdown-menu-border-radius: 12px;
    --dropdown-menu-shadow: none;
    --dropdown-menu-padding-x: 0;
    --dropdown-menu-padding-y: 8px;
    --dropdown-menu-width: 180px;
    --dropdown-item-border-radius: 0;
    --dropdown-item-text-color: #121212;
    --dropdown-item-padding-x: 10px;
    --dropdown-item-padding-y: 6px;
    --dropdown-item-hover-background: rgb(80, 100, 225);
    --dropdown-item-hover-text-color: white;
    --dropdown-menu-header-font-size: 12px;
    --dropdown-menu-header-text-color: #888888;
    --dropdown-menu-header-margin-left: 10px;
    --dropdown-menu-header-margin-y: 2px;
    --dropdown-menu-divider-border: 2px solid #CCCCCC;
    --dropdown-menu-divider-margin: 0
}

@media(refers-color-scheme:dark) {
    :root {
        --dropdown-menu-background: #121212;
        --dropdown-menu-border: 2px solid #AAAAAA;
        --dropdown-menu-shadow: none;
        --dropdown-item-text-color: #FCFCFC;
        --dropdown-item-hover-background: rgb(80, 100, 225);
        --dropdown-item-hover-text-color: white;
        --dropdown-menu-header-text-color: #888888;
        --dropdown-menu-divider-border: 2px solid #222222
    }
}

[dark-mode] {
    --dropdown-menu-background: #121212;
    --dropdown-menu-border: 2px solid #AAAAAA;
    --dropdown-menu-shadow: none;
    --dropdown-item-text-color: #FCFCFC;
    --dropdown-item-hover-background: rgb(80, 100, 225);
    --dropdown-item-hover-text-color: white;
    --dropdown-menu-header-text-color: #888888;
    --dropdown-menu-divider-border: 2px solid #222222
}

.wux-dropdown {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block
}

.wux-dropdown .wux-dropdown-menu {
    position: absolute;
    top: 100%;
    width: var(--dropdown-menu-width);
    background-color: var(--dropdown-menu-background);
    border: var(--dropdown-menu-border);
    border-radius: var(--dropdown-menu-border-radius);
    box-shadow: var(--dropdown-menu-shadow);
    cursor: pointer;
    margin-top: 2px;
    padding: var(--dropdown-menu-padding-y) var(--dropdown-menu-padding-x);
    opacity: 0;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed);
    visibility: hidden;
    z-index: 1
}

.wux-dropdown .wux-dropdown-menu .wux-dropdown-item {
    border-radius: var(--dropdown-item-border-radius);
    color: var(--dropdown-item-text-color);
    list-style: none;
    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
    transition: ease-in var(--global-animation-speed);
    -webkit-transition: ease-in var(--global-animation-speed)
}

.wux-dropdown .wux-dropdown-menu .wux-dropdown-item:hover {
    background-color: var(--dropdown-item-hover-background);
    color: var(--dropdown-item-hover-text-color)
}

.wux-dropdown .wux-dropdown-menu .wux-dropdown-menu-header {
    list-style: none;
    color: var(--dropdown-menu-header-text-color);
    font-size: var(--dropdown-menu-header-font-size);
    margin-left: var(--dropdown-menu-header-margin-left);
    margin-bottom: var(--dropdown-menu-header-margin-y)
}

.wux-dropdown .wux-dropdown-menu .wux-dropdown-menu-divider {
    height: 0;
    margin: var(--dropdown-menu-divider-margin) 0;
    overflow: hidden;
    list-style: none;
    border-top: var(--dropdown-menu-divider-border)
}

.wux-dropdown .wux-dropdown-trigger:focus+.wux-dropdown-menu {
    opacity: 99%;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed);
    visibility: visible
}

.wux-dropdown .wux-dropdown-menu:active {
    display: block;
    opacity: 99%
}

:root {
    --form-checks-border-width: 2px;
    --form-checks-border-color: #ABABAB;
    --form-checks-border-radius: 4px;
    --form-checks-hover-background-color: transparent;
    --form-checks-hover-shadow: 0px 0px 2px 1px #DDDDDD;
    --form-checks-checked-background-color: rgb(80, 100, 225);
    --form-checks-checked-border-width: 1px;
    --form-checks-checked-border-color: rgb(80, 100, 225);
    --form-checks-checked-shadow: none
}

@media(refers-color-scheme:dark) {
    :root {
        --form-checks-border-color: #ABABAB;
        --form-checks-hover-background-color: transparent;
        --form-checks-hover-shadow: 0px 0px 2px 1px #DDDDDD;
        --form-checks-checked-background-color: #7383e7;
        --form-checks-checked-border-color: #7383e7;
        --form-checks-checked-shadow: none
    }
}

[dark-mode] {
    --form-checks-border-color: #ABABAB;
    --form-checks-hover-background-color: transparent;
    --form-checks-hover-shadow: 0px 0px 2px 1px #DDDDDD;
    --form-checks-checked-background-color: #7383e7;
    --form-checks-checked-border-color: #7383e7;
    --form-checks-checked-shadow: none
}

.wux-form-checks {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: var(--form-checks-border-width) solid var(--form-checks-border-color);
    border-radius: var(--form-checks-border-radius);
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    vertical-align: middle;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed)
}

.wux-form-checks:not(:disabled):not(:checked):hover {
    background-color: var(--form-checks-hover-background-color);
    box-shadow: var(--form-checks-hover-shadow)
}

.wux-form-checks:checked {
    background-color: var(--form-checks-checked-background-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23FFF' stroke-width='2' stroke-linecap='butt' stroke-linejoin='round'%3E%3Cpolyline points='14 5 8 13 4 9'%3E%3C/polyline%3E%3C/svg%3E");
    border: var(--form-checks-checked-border-width) solid var(--form-checks-checked-border-color);
    box-shadow: var(--form-checks-checked-shadow);
    background-repeat: no-repeat
}

.wux-form-checks:disabled {
    cursor: default;
    filter: grayscale(1);
    opacity: 30%
}

:root {
    --form-input-background: #FFFFFF;
    --form-input-border-color: #CCCCCC;
    --form-input-border-width: 2px;
    --form-input-border-radius: 12px;
    --form-input-margin-bottom: 4px;
    --form-input-text-color: #121212;
    --form-input-hover-background: #FFFFFF;
    --form-input-hover-border-color: #CCCCCC;
    --form-input-hover-border-width: 2px;
    --form-input-hover-shadow: 0 0 2px 1px #DDDDDD;
    --form-input-hover-text-color: #121212;
    --form-input-focus-background: #FFFFFF;
    --form-input-focus-border-color: rgb(80, 100, 225);
    --form-input-focus-border-width: 2px;
    --form-input-focus-shadow: 0 0 2px 1px #DDDDDD;
    --form-input-focus-text-color: #121212;
    --form-input-invalid-background: #FFFFFF;
    --form-input-invalid-border-color: rgb(255, 85, 65);
    --form-input-invalid-border-width: 2px;
    --form-input-invalid-text-color: rgb(255, 85, 65);
    --form-input-invalid-shadow: 0 0 4px #ffbbb3;
    --form-input-disabled-opacity: 40%;
    --form-input-padding-x-xs: 6px;
    --form-input-padding-x-sm: 8px;
    --form-input-padding-x-md: 12px;
    --form-input-padding-x-lg: 16px;
    --form-input-padding-x-xl: 20px;
    --form-input-padding-y-xs: 4px;
    --form-input-padding-y-sm: 6px;
    --form-input-padding-y-md: 10px;
    --form-input-padding-y-lg: 14px;
    --form-input-padding-y-xl: 18px;
    --form-input-font-size-xs: 10px;
    --form-input-font-size-sm: 12px;
    --form-input-font-size-md: 14px;
    --form-input-font-size-lg: 16px;
    --form-input-font-size-xl: 18px;
    --form-input-border-radius-xs: 8px;
    --form-input-border-radius-sm: 10px;
    --form-input-border-radius-md: 12px;
    --form-input-border-radius-lg: 14px;
    --form-input-border-radius-xl: 16px
}

@media(refers-color-scheme:dark) {
    :root {
        --form-input-background: #121212;
        --form-input-border-color: #AAAAAA;
        --form-input-text-color: #FCFCFC;
        --form-input-hover-background: #121212;
        --form-input-hover-border-color: #AAAAAA;
        --form-input-hover-shadow: 0 0 2px 1px #DDDDDD;
        --form-input-hover-text-color: #FCFCFC;
        --form-input-focus-background: #121212;
        --form-input-focus-border-color: #7383e7;
        --form-input-focus-shadow: 0 0 2px 1px #DDDDDD;
        --form-input-focus-text-color: #FCFCFC;
        --form-input-invalid-background: #121212;
        --form-input-invalid-border-color: #ff7767;
        --form-input-invalid-text-color: #ff998d;
        --form-input-invalid-shadow: 0 0 4px #ffbbb3;
        --form-input-disabled-opacity: 40%
    }
}

[dark-mode] {
    --form-input-background: #121212;
    --form-input-border-color: #AAAAAA;
    --form-input-text-color: #FCFCFC;
    --form-input-hover-background: #121212;
    --form-input-hover-border-color: #AAAAAA;
    --form-input-hover-shadow: 0 0 2px 1px #DDDDDD;
    --form-input-hover-text-color: #FCFCFC;
    --form-input-focus-background: #121212;
    --form-input-focus-border-color: #7383e7;
    --form-input-focus-shadow: 0 0 2px 1px #DDDDDD;
    --form-input-focus-text-color: #FCFCFC;
    --form-input-invalid-background: #121212;
    --form-input-invalid-border-color: #ff7767;
    --form-input-invalid-text-color: #ff998d;
    --form-input-invalid-shadow: 0 0 4px #ffbbb3;
    --form-input-disabled-opacity: 40%
}

.wux-form-input {
    position: relative;
    width: 100%;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--form-input-background);
    border: var(--form-input-border-width) solid var(--form-input-border-color);
    border-radius: var(--form-input-border-radius);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--form-input-text-color);
    margin: 0;
    margin-bottom: var(--form-input-margin-bottom);
    resize: none;
    max-width: auto;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed);
    padding: var(--form-input-padding-y-md) var(--form-input-padding-x-md)
}

.wux-form-input:hover:not(:disabled):not(:focus):not(:invalid) {
    box-shadow: var(--form-input-hover-shadow);
    background: var(--form-input-hover-background);
    border: var(--form-input-hover-border-width) solid var(--form-input-hover-border-color);
    color: var(--form-input-hover-text-color);
    outline: 0
}

.wux-form-input:focus {
    box-shadow: var(--form-input-focus-shadow);
    background: var(--form-input-focus-background);
    border: var(--form-input-focus-border-width) solid var(--form-input-focus-border-color);
    color: var(--form-input-focus-text-color);
    outline: 0
}

.wux-form-input:invalid {
    box-shadow: var(--form-input-invalid-shadow);
    background: var(--form-input-invalid-background);
    border: var(--form-input-invalid-border-width) solid var(--form-input-invalid-border-color);
    color: var(--form-input-invalid-text-color);
    outline: 0
}

.wux-form-input:disabled {
    //opacity: var(--form-input-disabled-opacity);
    cursor: not-allowed;
}

.wux-form-input:-webkit-autofill {
    background-color: rgba(0,0,0,0);
    background-image: none;
    transition: background-color 99999999s ease-in-out 0s
}

.wux-form-input::placeholder {
    color: #ccc
}

.wux-form-input::-webkit-placeholder {
    color: #ccc
}

.wux-form-input::-moz-placeholder {
    color: #ccc
}

.wux-form-input-xs {
    padding: var(--form-input-padding-y-xs) var(--form-input-padding-x-xs);
    font-size: var(--form-input-font-size-xs);
    border-radius: var(--form-input-border-radius-xs)
}

.wux-form-input-sm {
    padding: var(--form-input-padding-y-sm) var(--form-input-padding-x-sm);
    font-size: var(--form-input-font-size-sm);
    border-radius: var(--form-input-border-radius-sm)
}

.wux-form-input-md {
    padding: var(--form-input-padding-y-md) var(--form-input-padding-x-md);
    font-size: var(--form-input-font-size-md);
    border-radius: var(--form-input-border-radius-md)
}

.wux-form-input-lg {
    padding: var(--form-input-padding-y-lg) var(--form-input-padding-x-lg);
    font-size: var(--form-input-font-size-lg);
    border-radius: var(--form-input-border-radius-lg)
}

.wux-form-input-xl {
    padding: var(--form-input-padding-y-xl) var(--form-input-padding-x-xl);
    font-size: var(--form-input-font-size-xl);
    border-radius: var(--form-input-border-radius-xl)
}

:root {
    --form-radios-border-color: #ABABAB;
    --form-radios-border-radius: 9999px;
    --form-radios-border-width: 2px;
    --form-radios-hover-background-color: #FFFFFF;
    --form-radios-hover-shadow: 0px 0px 2px 1px #DDDDDD;
    --form-radios-checked-background-color: white;
    --form-radios-checked-border-width: 5px;
    --form-radios-checked-border-color: rgb(80, 100, 225);
    --form-radios-checked-shadow: none
}

@media(refers-color-scheme:dark) {
    :root {
        --form-radios-border-color: #ABABAB;
        --form-radios-hover-background-color: transparent;
        --form-radios-hover-shadow: 0px 0px 2px 1px #DDDDDD;
        --form-radios-checked-background-color: #FFFFFF;
        --form-radios-checked-border-color: rgb(80, 100, 225);
        --form-radios-checked-shadow: none
    }
}

[dark-mode] {
    --form-radios-border-color: #ABABAB;
    --form-radios-hover-background-color: transparent;
    --form-radios-hover-shadow: 0px 0px 2px 1px #DDDDDD;
    --form-radios-checked-background-color: #FFFFFF;
    --form-radios-checked-border-color: rgb(80, 100, 225);
    --form-radios-checked-shadow: none
}

.wux-form-radios {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: var(--form-radios-border-width) solid var(--form-radios-border-color);
    border-radius: var(--form-radios-border-radius);
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    vertical-align: middle;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed)
}

.wux-form-radios:not(:disabled):not(:checked):hover {
    background-color: var(--form-radios-hover-background-color);
    box-shadow: var(--form-radios-hover-shadow)
}

.wux-form-radios:checked {
    background-color: var(--form-radios-checked-background-color);
    background-repeat: no-repeat;
    border: var(--form-radios-checked-border-width) solid var(--form-radios-checked-border-color);
    box-shadow: var(--form-radios-checked-shadow)
}

.wux-form-radios:disabled {
    cursor: default;
    filter: grayscale(1);
    opacity: 30%
}

:root {
    --form-range-thumb-background: rgb(80, 100, 225);
    --form-range-thumb-border: none;
    --form-range-thumb-shadow: 0 0 0 6px rgb(80, 100, 225);
    --form-range-thumb-height: 6px;
    --form-range-thumb-width: 6px;
    --form-range-track-background: #dce0f9;
    --form-range-track-border-radius: 9999px;
    --form-range-track-height: 2px;
    --form-range-thumb-focus-background: #4050b4;
    --form-range-thumb-focus-shadow: 0 0 0 4px #4050b4
}

@media(refers-color-scheme:dark) {
    :root {
        --form-range-thumb-background: #96a2ed;
        --form-range-thumb-border: none;
        --form-range-thumb-shadow: 0 0 0 6px #96a2ed;
        --form-range-track-background: #dce0f9;
        --form-range-track-border-radius: 9999px;
        --form-range-thumb-focus-background: #7383e7;
        --form-range-thumb-focus-shadow: 0 0 0 4px #7383e7
    }
}

[dark-mode] {
    --form-range-thumb-background: #96a2ed;
    --form-range-thumb-border: none;
    --form-range-thumb-shadow: 0 0 0 6px #96a2ed;
    --form-range-track-background: #dce0f9;
    --form-range-track-border-radius: 9999px;
    --form-range-thumb-focus-background: #7383e7;
    --form-range-thumb-focus-shadow: 0 0 0 4px #7383e7
}

.wux-form-range {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0,0,0,0);
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed);
    width: 100%;
    vertical-align: middle
}

.wux-form-range:active {
    outline: 0
}

.wux-form-range:active::-webkit-slider-thumb {
    box-shadow: var(--form-range-thumb-focus-shadow);
    background: var(--form-range-thumb-focus-background)
}

.wux-form-range:active::-moz-range-thumb {
    box-shadow: var(--form-range-thumb-focus-shadow);
    background: var(--form-range-thumb-focus-background)
}

.wux-form-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    background: var(--form-range-thumb-background);
    border: var(--form-range-thumb-border);
    border-radius: 5px;
    box-shadow: var(--form-range-thumb-shadow);
    transition: .2s;
    height: var(--form-range-thumb-height);
    width: var(--form-range-thumb-width)
}

.wux-form-range::-moz-range-thumb {
    appearance: none;
    background: var(--form-range-thumb-background);
    border: var(--form-range-thumb-border);
    border-radius: 5px;
    box-shadow: var(--form-range-thumb-shadow);
    transition: .2s;
    height: var(--form-range-thumb-height);
    width: var(--form-range-thumb-width)
}

.wux-form-range::-webkit-slider-runnable-track {
    background-color: var(--form-range-track-background);
    border-radius: var(--form-range-track-border-radius);
    border-color: transparent;
    color: transparent;
    cursor: pointer;
    vertical-align: middle
}

.wux-form-range::-moz-range-track {
    background-color: var(--form-range-track-background);
    border-radius: var(--form-range-track-border-radius);
    border-color: transparent;
    color: transparent;
    cursor: pointer;
    vertical-align: middle
}

:root {
    --form-select-background-color: #FFFFFF;
    --form-select-border-color: #CCCCCC;
    --form-select-border-width: 2px;
    --form-select-border-radius: 12px;
    --form-select-padding-x: 12px;
    --form-select-padding-y: 10px;
    --form-select-text-color: #121212;
    --form-select-hover-shadow: 0 0 6px #DDDDDD;
    --form-select-focus-border: 2px solid rgb(80, 100, 225);
    --form-select-focus-shadow: 0 0 6px #DDDDDD
}

@media(refers-color-scheme:dark) {
    :root {
        --form-select-background-color: #121212;
        --form-select-border-color: #CCCCCC;
        --form-select-text-color: #FCFCFC;
        --form-select-hover-shadow: 0 0 6px #DDDDDD;
        --form-select-focus-border: 2px solid rgb(80, 100, 225);
        --form-select-focus-shadow: 0 0 6px #DDDDDD
    }
}

[dark-mode] {
    --form-select-background-color: #121212;
    --form-select-border-color: #CCCCCC;
    --form-select-text-color: #FCFCFC;
    --form-select-hover-shadow: 0 0 6px #DDDDDD;
    --form-select-focus-border: 2px solid rgb(80, 100, 225);
    --form-select-focus-shadow: 0 0 6px #DDDDDD
}

.wux-form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: var(--form-select-border-width) solid var(--form-select-border-color);
    border-radius: var(--form-select-border-radius);
    background-color: var(--form-select-background-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none' stroke='%23AAA' stroke-width='2' stroke-linecap='butt' stroke-linejoin='round'%3E%3Cpolyline points='15 5 10 10 5 5 '%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--form-select-padding-x) center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: var(--form-select-text-color);
    padding: var(--form-select-padding-y) var(--form-select-padding-x);
    outline: 0;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed);
    width: 100%
}

.wux-form-select:hover {
    box-shadow: var(--form-select-hover-shadow)
}

.wux-form-select:focus {
    box-shadow: var(--form-select-focus-shadow);
    border: var(--form-select-focus-border);
    outline: 0
}

:root {
    --form-upload-border: none;
    --form-upload-border-radius: 8px;
    --form-upload-padding-x: 12px;
    --form-upload-padding-y: 18px;
    --form-upload-hover-shadow: none;
    --form-upload-button-background: rgb(80, 100, 225);
    --form-upload-button-border: none;
    --form-upload-button-border-radius: 12px;
    --form-upload-button-color: white;
    --form-upload-button-padding: 14px 16px;
    --form-upload-button-hover-background: #4050b4;
    --form-upload-button-hover-border: none;
    --form-upload-button-hover-border-radius: 12px;
    --form-upload-button-hover-color: white
}

@media(refers-color-scheme:dark) {
    :root {
        --form-upload-border: none;
        --form-upload-hover-shadow: none;
        --form-upload-button-background: #7383e7;
        --form-upload-button-border: none;
        --form-upload-button-color: white;
        --form-upload-button-hover-background: rgb(80, 100, 225);
        --form-upload-button-hover-border: none;
        --form-upload-button-hover-color: white
    }
}

[dark-mode] {
    --form-upload-border: none;
    --form-upload-hover-shadow: none;
    --form-upload-button-background: #7383e7;
    --form-upload-button-border: none;
    --form-upload-button-color: white;
    --form-upload-button-hover-background: rgb(80, 100, 225);
    --form-upload-button-hover-border: none;
    --form-upload-button-hover-color: white
}

.wux-form-upload {
    position: relative;
    width: 100%;
    display: block;
    appearance: none;
    border: var(--form-upload-border);
    border-radius: var(--form-upload-border-radius);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    cursor: pointer;
    padding: var(--form-upload-padding-y) var(--form-upload-padding-x);
    margin: 0;
    text-align: center;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed);
    vertical-align: middle;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    white-space: nowrap
}

.wux-form-upload:hover {
    box-shadow: var(--form-upload-hover-shadow)
}

.wux-form-upload::file-selector-button {
    background: var(--form-upload-button-background);
    border: var(--form-upload-button-border);
    border-radius: var(--form-upload-button-border-radius);
    color: var(--form-upload-button-color);
    cursor: pointer;
    padding: var(--form-upload-button-padding);
    margin-right: 10px;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed)
}

.wux-form-upload::file-selector-button:hover {
    background: var(--form-upload-button-hover-background);
    border: var(--form-upload-button-hover-border);
    border-radius: var(--form-upload-button-hover-border-radius);
    color: var(--form-upload-button-hover-color)
}

.wux-form-upload::-webkit-file-upload-button {
    background: var(--form-upload-button-background);
    border: var(--form-upload-button-border);
    border-radius: var(--form-upload-button-border-radius);
    color: var(--form-upload-button-color);
    cursor: pointer;
    padding: var(--form-upload-button-padding);
    margin-right: 10px;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed)
}

.wux-form-upload::-webkit-file-upload-button:hover {
    background: var(--form-upload-button-hover-background);
    border: var(--form-upload-button-hover-border);
    border-radius: var(--form-upload-button-hover-border-radius);
    color: var(--form-upload-button-hover-color)
}

:root {
    --header-background: transparent;
    --header-font-size: 16px;
    --header-padding-x: 16px;
    --header-padding-y: 14px;
    --header-text-color: rgb(80, 100, 225);
    --header-title-text-color: #121212;
    --header-option-border-radius: 12px;
    --header-option-padding-x: 12px;
    --header-option-padding-y: 8px;
    --header-option-space: 4px;
    --header-option-text-color: rgb(80, 100, 225);
    --header-option-hover-background-color: rgb(240, 240, 240);
    --header-fixed-background: #FFFFFF;
    --header-fixed-shadow: 0 0 8px #DDDDDD;
    --header-fixed-text-color: rgb(80, 100, 225);
    --header-small-option-group-padding: 6px;
    --header-option-bold-background-color: rgb(80, 100, 225);
    --header-option-bold-text-color: white
}

@media(refers-color-scheme:dark) {
    :root {
        --header-background: transparent;
        --header-text-color: #96a2ed;
        --header-title-text-color: #FCFCFC;
        --header-fixed-background: #000000;
        --header-fixed-shadow: 0 0 10px #000000;
        --header-fixed-text-color: #96a2ed;
        --header-option-text-color: #FCFCFC;
        --header-option-hover-background-color: #242424;
        --header-option-bold-background-color: #96a2ed;
        --header-option-bold-text-color: #20285a
    }
}

[dark-mode] {
    --header-background: transparent;
    --header-text-color: #96a2ed;
    --header-title-text-color: #FCFCFC;
    --header-fixed-background: #000000;
    --header-fixed-shadow: 0 0 10px #000000;
    --header-fixed-text-color: #96a2ed;
    --header-option-text-color: #FCFCFC;
    --header-option-hover-background-color: #242424;
    --header-option-bold-background-color: #96a2ed;
    --header-option-bold-text-color: #20285a
}

.wux-header {
    background: var(--header-background);
    color: var(--header-text-color);
    margin: 0;
    padding: var(--header-padding-y) 0;
    font-size: var(--header-font-size)
}

.wux-header:after {
    content: "";
    display: table;
    clear: both
}

.wux-header.wux-header-fixed {
    background: var(--header-fixed-background);
    color: var(--header-fixed-text-color);
    box-shadow: var(--header-fixed-shadow);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%
}

.wux-header .wux-header-title {
    color: var(--header-title-text-color);
    font-weight: 700;
    float: left;
    padding-top: var(--header-option-padding-y);
    padding-bottom: var(--header-option-padding-y);
    margin-left: var(--header-padding-x)
}

@media(max-width: 600px) {
    .wux-header .wux-header-small-option-group {
        display:inline-block;
        float: right;
        margin: 0;
        margin-right: var(--header-padding-x)
    }

    .wux-header .wux-header-small-option-group:focus+.wux-header-option-group {
        display: block;
        position: static
    }

    .wux-header .wux-header-small-option-group:focus+.wux-header-option-group .wux-header-option {
        display: inline-block;
        width: 100%
    }

    .wux-header .wux-header-small-option-group+.wux-header-option-group {
        display: none;
        padding: 0;
        margin-top: 40px;
        margin-left: var(--header-padding-x);
        margin-right: var(--header-padding-x)
    }

    .wux-header .wux-header-small-option-group+.wux-header-option-group .wux-header-option {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-radius: var(--header-option-border-radius);
        color: var(--header-text-color);
        display: none;
        margin-top: 4px;
        padding: var(--header-option-padding-y) var(--header-option-padding-x);
        transition: var(--global-animation-speed);
        -webkit-transition: var(--global-animation-speed);
        text-decoration: none;
        white-space: nowrap
    }

    .wux-header .wux-header-small-option-group+.wux-header-option-group .wux-header-option:hover {
        background: var(--header-option-hover-background-color)
    }

    .wux-header .wux-header-small-option-group+.wux-header-option-group .wux-header-option:maker {
        display: none
    }

    .wux-header .wux-header-small-option-group+.wux-header-option-group:active {
        display: block;
        position: static
    }

    .wux-header .wux-header-small-option-group+.wux-header-option-group:active .wux-header-option {
        display: inline-block;
        width: 100%
    }
}

@media(min-width: 600px) {
    .wux-header .wux-header-small-option-group {
        display:none
    }

    .wux-header .wux-header-option-group {
        float: right;
        margin: 0;
        margin-right: var(--header-padding-x);
        display: block!important
    }

    .wux-header .wux-header-option-group .wux-header-option {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-radius: var(--header-option-border-radius);
        color: var(--header-text-color);
        cursor: pointer;
        display: inline-block!important;
        padding: var(--header-option-padding-y) var(--header-option-padding-x);
        text-decoration: none;
        transition: var(--global-animation-speed);
        -webkit-transition: var(--global-animation-speed);
        white-space: nowrap
    }

    .wux-header .wux-header-option-group .wux-header-option+wux-header-option {
        margin-left: var(--header-option-space)
    }

    .wux-header .wux-header-option-group .wux-header-option a {
        color: inherit;
        text-decoration: none
    }

    .wux-header .wux-header-option-group .wux-header-option:hover {
        background: var(--header-option-hover-background-color)
    }
}

.wux-header .wux-header-small-option-group {
    background: rgba(0,0,0,0);
    border: none;
    color: var(--header-option-text-color);
    padding-top: var(--header-option-padding-y);
    padding-bottom: var(--header-option-padding-y)
}

.wux-header .wux-header-option-bold {
    background-color: var(--header-option-bold-background-color)!important;
    color: var(--header-option-bold-text-color)!important
}

.wux-header-fixed-margin {
    margin-top: calc(var(--header-padding-y)*2 + var(--header-font-size) + var(--header-option-padding-y)*2 + 12px)
}

:root {
    --jumbotron-background: transparent;
    --jumbotron-padding: 64px 16px;
    --jumbotron-text-align: left;
    --jumbotron-title-font-size: 52px;
    --jumbotron-title-margin-y: 16px;
    --jumbotron-title-text-color: #121212;
    --jumbotron-title-bold-color: rgb(80, 100, 225);
    --jumbotron-subtitle-font-size: 20px;
    --jumbotron-subtitle-margin-y: 8px;
    --jumbotron-button-group-margin-y: 60px
}

@media(refers-color-scheme:dark) {
    :root {
        --jumbotron-background: transparent;
        --jumbotron-title-text-color: #FCFCFC;
        --jumbotron-title-bold-color: #7383e7
    }
}

[dark-mode] {
    --jumbotron-background: transparent;
    --jumbotron-title-text-color: #FCFCFC;
    --jumbotron-title-bold-color: #7383e7
}

.wux-jumbotron {
    background: var(--jumbotron-background);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--jumbotron-padding);
    text-align: var(--jumbotron-text-align)
}

.wux-jumbotron[align=center] {
    text-align: center
}

.wux-jumbotron[align=left] {
    text-align: left
}

.wux-jumbotron[align=right] {
    text-align: right
}

.wux-jumbotron .wux-jumbotron-title {
    color: var(--jumbotron-title-text-color);
    font-size: var(--jumbotron-title-font-size);
    font-weight: 700;
    margin: var(--jumbotron-title-margin-y) 0
}

.wux-jumbotron .wux-jumbotron-title .wux-jumbotron-title-bold {
    color: var(--jumbotron-title-bold-color)
}

.wux-jumbotron .wux-jumbotron-subtitle {
    font-size: var(--jumbotron-subtitle-font-size);
    margin: var(--jumbotron-subtitle-margin-y) 0
}

.wux-jumbotron .wux-jumbotron-btn-group {
    position: static;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    margin: var(--jumbotron-button-group-margin-y) 0
}

:root {
    --list-border: 2px solid #CCCCCC;
    --list-border-radius: 12px;
    --list-item-background: #FFFFFF;
    --list-item-border-width: 0;
    --list-item-border-color: #CCCCCC;
    --list-item-padding: 12px;
    --list-item-text-color: #121212;
    --list-item-hover-background: #b9c1f3;
    --list-item-hover-text-color: #20285a;
    --list-item-focus-background: rgb(80, 100, 225);
    --list-item-focus-text-color: white
}

@media(refers-color-scheme:dark) {
    :root {
        --list-border: 2px solid #888888;
        --list-item-background: #121212;
        --list-item-border-color: #888888;
        --list-item-text-color: #FCFCFC;
        --list-item-hover-background: #b9c1f3;
        --list-item-hover-text-color: #20285a;
        --list-item-focus-background: rgb(80, 100, 225);
        --list-item-focus-text-color: white
    }
}

[dark-mode] {
    --list-border: 2px solid #888888;
    --list-item-background: #121212;
    --list-item-border-color: #888888;
    --list-item-text-color: #FCFCFC;
    --list-item-hover-background: #b9c1f3;
    --list-item-hover-text-color: #20285a;
    --list-item-focus-background: rgb(80, 100, 225);
    --list-item-focus-text-color: white
}

.wux-list-group {
    border: var(--list-border);
    border-radius: var(--list-border-radius);
    border-collapse: collapse;
    padding: 0
}

.wux-list-group .wux-list-item {
    background-color: var(--list-item-background);
    border: var(--list-item-border-width) solid var(--list-item-border-color);
    border-collapse: collapse;
    border-radius: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: var(--list-text-color);
    display: block;
    list-style: none;
    margin: 0!important;
    margin-top: calc(0 - (var(--list-item-border-width) + 1));
    padding: 12px;
    width: 100%;
    transition: .5s;
    -webkit-transition: .5s
}

.wux-list-group .wux-list-item+.wux-list-item {
    border-top: none
}

.wux-list-group .wux-list-item:first-child {
    border-top-right-radius: var(--list-border-radius);
    border-top-left-radius: var(--list-border-radius)
}

.wux-list-group .wux-list-item:last-child {
    border-bottom-right-radius: var(--list-border-radius);
    border-bottom-left-radius: var(--list-border-radius)
}

.wux-list-group .wux-list-item-action {
    cursor: pointer
}

.wux-list-group .wux-list-item-action:hover {
    background-color: var(--list-item-hover-background);
    border-color: var(--list-item-hover-background);
    color: var(--list-item-hover-text-color)
}

.wux-list-group .wux-list-item-action.wux-list-item-focus,.wux-list-group .wux-list-item-action:active {
    background-color: var(--list-item-focus-background);
    border-color: var(--list-item-focus-background);
    color: var(--list-item-focus-text-color)
}

:root {
    --loading-speed: 0.8s;
    --loading-circle-width: 2.5px
}

.wux-loading {
    pointer-events: none
}

.wux-loading:before {
    animation: spinner .8s linear infinite;
    border: 2.5px solid currentColor;
    border-radius: 9999px;
    border-right-color: transparent;
    content: "";
    display: inline-block;
    height: 1em;
    vertical-align: text-bottom;
    width: 1em;
    pointer-events: none
}

@keyframes spinner {
    to {
        transform: rotate(360deg)
    }
}

:root {
    --progress-background-color: #FFFFFF;
    --progress-border-width: 2px;
    --progress-border-color: #CCCCCC;
    --progress-border-radius: 8px;
    --progress-height: 16px;
    --progress-line-color: rgb(80, 100, 225)
}

@media(refers-color-scheme:dark) {
    :root {
        --progress-background-color: #121212;
        --progress-border-color: #888888;
        --progress-line-color: rgb(80, 100, 225)
    }
}

[dark-mode] {
    --progress-background-color: #121212;
    --progress-border-color: #888888;
    --progress-line-color: rgb(80, 100, 225)
}

.wux-progress {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--progress-background-color);
    border: var(--progress-border-width) solid var(--progress-border-color);
    border-radius: var(--progress-border-radius);
    display: inline-block;
    overflow: hidden;
    height: var(--progress-height);
    transition: ease var(--global-animation-speed);
    -webkit-transition: ease var(--global-animation-speed);
    width: 100%
}

.wux-progress::-webkit-progress-bar {
    border-radius: var(--progress-border-radius);
    background: 0 0
}

.wux-progress[value]::-webkit-progress-value {
    background-color: var(--progress-line-color)
}

.wux-progress::-moz-progress-bar {
    background-color: var(--progress-line-color)
}

:root {
    --search-border-color: #CCCCCC;
    --search-border-width: 2px;
    --search-border-radius: 9999px;
    --search-background-color: #FFFFFF;
    --search-padding: 12px 16px;
    --search-text-color: #121212;
    --search-hover-background-color: #FFFFFF;
    --search-hover-border-width: 2px;
    --search-hover-border-color: #CCCCCC;
    --search-hover-text-color: #121212;
    --search-hover-shadow: 0 0 6px #DDDDDD;
    --search-focus-background-color: #FFFFFF;
    --search-focus-border-width: 2px;
    --search-focus-border-color: rgb(80, 100, 225);
    --search-focus-text-color: #121212;
    --search-focus-shadow: 0 0 6px #DDDDDD
}

@media(refers-color-scheme:dark) {
    :root {
        --search-border-color: #AAAAAA;
        --search-background-color: #121212;
        --search-text-color: #FCFCFC;
        --search-hover-background-color: #121212;
        --search-hover-border-color: #AAAAAA;
        --search-hover-text-color: #FCFCFC;
        --search-hover-shadow: 0 0 2px #DDDDDD;
        --search-focus-background-color: #121212;
        --search-focus-border-color: #7383e7;
        --search-focus-text-color: #FCFCFC;
        --search-focus-shadow: 0 0 2px #DDDDDD
    }
}

[dark-mode] {
    --search-border-color: #AAAAAA;
    --search-background-color: #121212;
    --search-text-color: #FCFCFC;
    --search-hover-background-color: #121212;
    --search-hover-border-color: #AAAAAA;
    --search-hover-text-color: #FCFCFC;
    --search-hover-shadow: 0 0 2px #DDDDDD;
    --search-focus-background-color: #121212;
    --search-focus-border-color: #7383e7;
    --search-focus-text-color: #FCFCFC;
    --search-focus-shadow: 0 0 2px #DDDDDD
}

.wux-search {
    width: 100%;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--search-background-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none' stroke='rgb(100,100,100)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='6'%3E%3C/circle%3E%3Cline x1='15' y1='15' x2='12' y2='12'%3E%3C/line%3E%3C/svg%3E");
    background-position: center left 15px;
    background-repeat: no-repeat;
    border: var(--search-border-width) solid var(--search-border-color);
    border-radius: var(--search-border-radius);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: var(--search-text-color)!important;
    padding: var(--search-padding);
    padding-inline-start:40px;transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed)
}

.wux-search:hover {
    box-shadow: var(--search-hover-shadow);
    background-color: var(--search-hover-background-color);
    border: var(--search-hover-border-width) solid var(--search-hover-border-color);
    color: var(--search-hover-text-color);
    outline: 0
}

.wux-search:focus {
    box-shadow: var(--search-focus-shadow);
    background-color: var(--search-focus-background-color);
    border: var(--search-focus-border-width) solid var(--search-focus-border-color);
    color: var(--search-focus-text-color);
    outline: 0
}

.wux-search:-webkit-autofill {
    background-color: rgba(0,0,0,0);
    background-image: none;
    transition: background-color 500000s ease-in-out 0s
}

:root {
    --tab-item-background: transparent;
    --tab-item-border: none;
    --tab-item-border-radius: 0;
    --tab-item-padding: 8px 32px;
    --tab-item-text-color: #121212;
    --tab-item-focus-background: transparent;
    --tab-item-focus-border-color: #7383e7;
    --tab-item-focus-text-color: rgb(80, 100, 225);
    --tab-content-padding: 0;
    --tab-content-margin: 12px
}

@media(refers-color-scheme:dark) {
    :root {
        --tab-item-background: transparent;
        --tab-item-border: none;
        --tab-item-text-color: #FCFCFC;
        --tab-item-focus-background: transparent;
        --tab-item-focus-border-color: rgb(80, 100, 225);
        --tab-item-focus-text-color: #96a2ed
    }
}

[dark-mode] {
    --tab-item-background: transparent;
    --tab-item-border: none;
    --tab-item-text-color: #FCFCFC;
    --tab-item-focus-background: transparent;
    --tab-item-focus-border-color: rgb(80, 100, 225);
    --tab-item-focus-text-color: #96a2ed
}

.wux-tab {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.wux-tab label.wux-tab-item {
    background-color: var(--tab-item-background);
    border-radius: var(--tab-item-border-radius);
    border-bottom: var(--tab-item-border);
    color: var(--tab-item-text-color);
    cursor: pointer;
    display: inline-block;
    padding: var(--tab-item-padding);
    position: relative;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.wux-tab label.wux-tab-item:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 80%;
    right: 80%;
    bottom: 0;
    transition: ease var(--global-animation-speed);
    -webkit-transition: ease var(--global-animation-speed);
    background-color: var(--tab-item-focus-border-color)
}

.wux-tab .wux-tab-content {
    display: none;
    padding: var(--tab-content-padding);
    margin-top: var(--tab-content-margin);
    order: 1;
    opacity: 0;
    width: 100%
}

.wux-tab input[type=radio].wux-tab-item {
    display: none
}

.wux-tab input[type=radio].wux-tab-item:checked+label.wux-tab-item {
    background-color: var(--tab-item-focus-background);
    color: var(--tab-item-focus-text-color)
}

.wux-tab input[type=radio].wux-tab-item:checked+label.wux-tab-item:after {
    border-radius: 8px;
    top: 92%;
    left: 5%;
    right: 5%;
    bottom: 0
}

.wux-tab input[type=radio].wux-tab-item:checked+label.wux-tab-item+.wux-tab-content {
    display: block;
    opacity: 100%
}

:root {
    --tables-background-color: #FFFFFF;
    --tables-border: 2px solid #CCCCCC;
    --tables-border-radius: 12px;
    --tables-padding: 0;
    --tables-shadow: none;
    --tables-head-background-color: #DDDDDD;
    --tables-head-text-color: #121212;
    --tables-head-margin: 8px;
    --tables-head-item-padding: 8px;
    --tables-row-header-background-color: #EEEEEE;
    --tables-row-item-border: 1px solid #CCCCCC;
    --tables-row-item-padding: 8px;
    --tables-row-item-text-color: #121212;
    --tables-row-margin: 4px
}

@media(refers-color-scheme:dark) {
    :root {
        --tables-background-color: #121212;
        --tables-border: 2px solid #AAAAAA;
        --tables-shadow: none;
        --tables-head-background-color: #080808;
        --tables-head-text-color: #FCFCFC;
        --tables-row-header-background-color: #242424;
        --tables-row-item-border: 1px solid #AAAAAA;
        --tables-row-item-text-color: #121212
    }
}

[dark-mode] {
    --tables-background-color: #121212;
    --tables-border: 2px solid #AAAAAA;
    --tables-shadow: none;
    --tables-head-background-color: #080808;
    --tables-head-text-color: #FCFCFC;
    --tables-row-header-background-color: #242424;
    --tables-row-item-border: 1px solid #AAAAAA;
    --tables-row-item-text-color: #121212
}

.wux-table {
    position: relative;
    background-color: var(--tables-background-color);
    border: var(--tables-border);
    border-radius: var(--tables-border-radius);
    border-spacing: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: var(--tables-shadow);
    padding: var(--tables-padding);
    z-index: 0
}

.wux-table thead {
    background-color: var(--tables-head-background-color);
    border-collapse: collapse;
    color: var(--tables-head-text-color)!important;
    margin-bottom: var(--tables-head-margin)
}

.wux-table thead th {
    border-bottom: var(--tables-border);
    position: relative;
    padding: var(--tables-head-item-padding);
    min-width: 36px
}

.wux-table thead th:first-child {
    border-radius: var(--tables-border-radius) 0 0 0!important
}

.wux-table thead th:last-child {
    border-radius: 0 var(--tables-border-radius) 0 0!important
}

.wux-table tbody {
    border-collapse: collapse
}

.wux-table tbody tr {
    position: relative;
    margin-bottom: var(--tables-row-margin)
}

.wux-table tbody tr:first-child td {
    border-top: none
}

.wux-table tbody tr:last-child td {
    border-bottom: none
}

.wux-table tbody tr:last-child td:first-child,.wux-table tbody tr:last-child th:first-child {
    border-radius: 0 0 0 var(--tables-border-radius)
}

.wux-table tbody tr:last-child td:last-child,.wux-table tbody tr:last-child th:last-child {
    border-radius: 0 0 var(--tables-border-radius) 0
}

.wux-table tbody th {
    position: relative;
    background-color: var(--tables-row-header-background-color)
}

.wux-table tbody td {
    position: relative;
    border: var(--tables-row-item-border);
    padding: var(--tables-row-item-padding)
}

.wux-table tbody td:last-child {
    border-right: none
}

.wux-table-fluid {
    margin-right: 0;
    margin-left: 0;
    width: 100%
}

:root {
    --tag-border-radius: 4px;
    --tag-margin: 2px;
    --tag-padding: 6px 8px;
    --tag-background-color-primary: #b9c1f3;
    --tag-background-color-secondary: #d9c1f9;
    --tag-background-color-success: #abe9c9;
    --tag-background-color-info: #9fe9ed;
    --tag-background-color-warning: #fbd5ad;
    --tag-background-color-error: #ffbbb3;
    --tag-background-color-light: #d6d6d6;
    --tag-text-color-primary: #20285a;
    --tag-text-color-secondary: #402860;
    --tag-text-color-success: #125030;
    --tag-text-color-info: #065054;
    --tag-text-color-warning: #623c14;
    --tag-text-color-error: #66221a;
    --tag-text-color-light: #3d3d3d
}

@media(refers-color-scheme:dark) {
    :root {
        --tag-background-color-primary: #96a2ed;
        --tag-background-color-secondary: #c6a2f6;
        --tag-background-color-success: #81deae;
        --tag-background-color-info: #6fdee4;
        --tag-background-color-warning: #f9c084;
        --tag-background-color-error: #ff998d;
        --tag-background-color-light: #c2c2c2;
        --tag-text-color-primary: #20285a;
        --tag-text-color-secondary: #402860;
        --tag-text-color-success: #125030;
        --tag-text-color-info: #065054;
        --tag-text-color-warning: #623c14;
        --tag-text-color-error: #66221a;
        --tag-text-color-light: #3d3d3d
    }
}

[dark-mode] {
    --tag-background-color-primary: #96a2ed;
    --tag-background-color-secondary: #c6a2f6;
    --tag-background-color-success: #81deae;
    --tag-background-color-info: #6fdee4;
    --tag-background-color-warning: #f9c084;
    --tag-background-color-error: #ff998d;
    --tag-background-color-light: #c2c2c2;
    --tag-text-color-primary: #20285a;
    --tag-text-color-secondary: #402860;
    --tag-text-color-success: #125030;
    --tag-text-color-info: #065054;
    --tag-text-color-warning: #623c14;
    --tag-text-color-error: #66221a;
    --tag-text-color-light: #3d3d3d
}

.wux-tag {
    position: static;
    border-radius: var(--tag-border-radius);
    padding: var(--tag-padding);
    margin-right: var(--tag-margin);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    background-color: var(--tag-background-color-primary);
    color: var(--tag-text-color-primary)
}

.wux-tag .wux-tag-close {
    cursor: pointer;
    margin-left: 12px
}

.wux-tag-primary {
    background-color: var(--tag-background-color-primary);
    color: var(--tag-text-color-primary)
}

.wux-tag-secondary {
    background-color: var(--tag-background-color-secondary);
    color: var(--tag-text-color-secondary)
}

.wux-tag-success {
    background-color: var(--tag-background-color-success);
    color: var(--tag-text-color-success)
}

.wux-tag-info {
    background-color: var(--tag-background-color-info);
    color: var(--tag-text-color-info)
}

.wux-tag-warning {
    background-color: var(--tag-background-color-warning);
    color: var(--tag-text-color-warning)
}

.wux-tag-error {
    background-color: var(--tag-background-color-error);
    color: var(--tag-text-color-error)
}

.wux-tag-light {
    background-color: var(--tag-background-color-light);
    color: var(--tag-text-color-light)
}

:root {
    --tooltip-border-radius: 8px;
    --tooltip-font-size: 12px;
    --tooltip-padding: 8px
}

.wux-tooltip .wux-tooltip-item {
    position: absolute;
    border-radius: var(--tooltip-border-radius);
    background-color: #000;
    font-size: var(--tooltip-font-size);
    opacity: 0;
    padding: var(--tooltip-padding);
    visibility: hidden;
    transition: var(--global-animation-speed);
    -webkit-transition: var(--global-animation-speed);
    z-index: 1
}

.wux-tooltip:hover .wux-tooltip-item {
    opacity: 80%;
    visibility: visible
}

.wux-tooltip .wux-tooltip-item-top {
    bottom: 110%;
    left: 0
}

.wux-tooltip .wux-tooltip-item-bottom {
    top: 110%;
    left: 0
}

.wux-tooltip .wux-tooltip-item-right {
    bottom: 50%;
    left: 105%
}

.wux-tooltip .wux-tooltip-item-left {
    bottom: 50%;
    right: 105%
}

.wux-container {
    font-family: consolas_
}